使用侧边栏和动态内容/组件创建 Angular 项目 - 辅助路线

Question

我很想建立一个包含两个主要部分的网站。一次是登录页面，一次是一种带有子页面的仪表板。

仪表板应该有一个带有内容区域的侧边菜单。各种组件应相应地显示在内容区域中。

你知道我该怎么做吗？我首先用辅助路由解决了这个问题。

但是，这样做的缺点是 URL 现在看起来像这样：

http://localhost:4200/(login:login)

而且我无法通过“/login”访问该页面。这是辅助路线的代码：

在应用程序中-routing.modules.ts

{
    path: 'login',
    component: LoginComponent,
    outlet: 'login'
},

以及导航到登录页面的代码：

this.router.navigate(['', { outlets: { login: ['login'] } }]);

和 app.component.html:

<router-outlet></router-outlet>
<router-outlet name="login"></router-outlet>

我怎样才能解决 URL 的问题，或者充其量，为带有侧面菜单和组件动态内容的模板创建第二个路由器出口？

Answer 1

您可以使用嵌套的路由器出口，这将使您的路线尽可能简单，然后您在使用路线时也不必提供出口名称。嵌套奥特莱斯提供两全其美。

Create Angular Project with sidebar and dynamic content / components - auxiliary-routes