我有一个应用程序,其中有标题和侧边栏。看起来像这样:
<mat-drawer-container class="sidenav-container">
<app-side-nav></app-side-nav>
<mat-drawer-content>
<app-header></app-header>
<main>
<router-outlet></router-outlet>
</main>
</mat-drawer-content>
</mat-drawer-container>
侧面导航包含2个模块作为可单击链接(例如,module1,module2)。 Module1包含3个名为my identity,users and container.
的组件
这是容器html:
<nav mat-tab-nav-bar>
<a mat-tab-link [routerLink]="['/identity/my-identity']">My
Identity</a>
<a mat-tab-link [routerLink]="['/identity/users']">Users</a>
</<nav mat-tab-nav-bar>
我的计划是从容器导航到身份或用户。 在图片中,当我单击module1时,您可以看到当前页面。但是不幸的是,每当我单击标识或用户时,它都会正确加载该组件,但导航菜单会消失。
我想要以下行为:默认情况下,单击module1应该加载my identity
,并且我可以导航到用户而不会消失导航菜单。我应该怎么做或更正?
答案 0 :(得分:0)
那是因为您的标签Identity
和Users
是单个路由器出口的一部分。
尝试在包含它们的组件中遵循以下结构:
<nav mat-tab-nav-bar>
</nav mat-tab-nav-bar>
<router-outlet></router-outlet>
使用the documentation正确实施。
然后可以声明此路线的子级。这意味着正确完成操作后,您将仅更改深度n°2(第二个router-outlet
),而不是第一个。
但是,如果想要更具体的答案,请考虑再提供一个最小且可重现的示例。