了解顶级<路由器出口>和子模块<路由器出口>

Question

我是Angular框架和创建角度应用程序的新手。我有一个布局（页眉，正文，页脚），其中页眉和页脚应该固定，并放置在app.component.html中。仅需要根据单击或导航来更改主体。 因此，但现在，我遇到了一个问题。

App.component.html

 <app-header></app-header>
 <router-outlet></router-outlet>
 <!-- Footer Selector-->
 <app-footer></app-footer>

仪表板组件

  <div class="container-fluid">
      <div class="container-fluid">
         <span class="badge badge-secondary">Badge 1</span>
      </div>
      <div class="container-fluid">
         <span class="badge badge-secondary" (click)="navigateToBadge2()">Badge 2</span>
      </div>
      <div class="container-fluid">
          <span class="badge badge-secondary">Badge 3</span>
      </div>
      <div class="container-fluid">
          <span class="badge badge-secondary">Badge 4</span>
      </div>
 </div>
 <router-outlet>
 </router-outlet>

仪表板TS

navigateToBadge2() {
    this.router.navigate(['/dashboard/badge2']);
  }

每当我单击徽章时，它都可以正常导航，但仍会显示徽章。 我只想导航到徽章组件，而不显示仪表板屏幕。 结果如下。 我固定了页眉和页脚，但是即使导航成功，也会显示徽章。如果我从仪表板组件中删除。无法看到徽章内容。 谁能帮助我解决这个问题。 预先感谢

路由模块

   { path: 'dashboard', component: DashboardComponent, children:
    [
      { path: 'badge1', component: Badge1Component },
      { path: 'badge2', component: Badge2Component },
      { path: 'badge3', component: Badge3Component }]}

Answer 1

访问子路由时，它不会离开父路由。它只会在父路径中包含一条新的子路径。对于您而言，您始终将位于“仪表板”路线内，更改子路线只会重绘子路线区域（内部路由器出口）。

如果您希望拥有一条没有徽章菜单的路线，那么我认为您最好的方法是在“仪表盘”的同一级别中创建一条路线（使用第一个路由器出口）。因此，您可以使用 this.router.navigate（['/ badge2']）;

进行导航