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

Question

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

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

你有什么想法我可以做到这一点吗？ 我首先通过辅助路线解决了这个问题。

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

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

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

在app-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

您可以使用嵌套的路由器插座，这将使您的路由保持应有的简单性，然后您也不必在使用路由时提供插座名称。嵌套式奥特莱斯提供两全其美。

你可以在这里推荐他们：- https://medium.com/dev-genius/the-art-of-nested-router-outlets-in-angular-dafb38245a30#:~:text=While%20designing%20your%20Angular%20Application,that%20particular%20tab%20is%20selected。