时间戳

首页 > 解决方案 > 角路由器出口移除的导航栏

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 个模块作为可点击链接（比如说模块 1、模块 2）。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 时，您可以看到当前页面。但不幸的是，每当我点击身份或用户时，它都会正确加载组件，但导航菜单会消失。

我想要以下行为：my identity默认情况下，单击 module1 应该加载，我可以导航到用户而不会消失导航菜单。我应该做哪些更正或如何做到这一点？

标签： angular

解决方案

那是因为您的标签是单个路由器插座的一部分Identity。Users

尝试在包含它们的组件中遵循此结构：

<nav mat-tab-nav-bar>

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

使用文档正确实现它。

然后，您可以向这条路线声明孩子。这意味着如果正确完成，您将router-outlet仅更改深度 n°2（第二个），而不是第一个。

但话又说回来，如果您想要更具体的答案，请考虑提供一个最小且可重现的问题示例。

推荐阅读