导航栏已由有角路由器出口移除

时间:2019-06-19 14:30:16

标签: angular

我有一个应用程序,其中有标题和侧边栏。看起来像这样:

<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. enter image description here的组件 这是容器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,并且我可以导航到用户而不会消失导航菜单。我应该怎么做或更正?

1 个答案:

答案 0 :(得分:0)

那是因为您的标签IdentityUsers是单个路由器出口的一部分。

尝试在包含它们的组件中遵循以下结构:

<nav mat-tab-nav-bar>

</nav mat-tab-nav-bar>
<router-outlet></router-outlet>

使用the documentation正确实施。

然后可以声明此路线的子级。这意味着正确完成操作后,您将仅更改深度n°2(第二个router-outlet),而不是第一个。

但是,如果想要更具体的答案,请考虑再提供一个最小且可重现的示例。