Angular 了解顶级和子模块

我对Angular框架和创建Angular应用程序不熟悉。我有一个layouthheader，Body，Footer，其中页眉和页脚应该是固定的，它们被放在app.component.html中。只需根据单击或导航更改主体。 所以，现在，我被一个问题打动了

App.component.html

每当我单击徽章时，它都会正确导航，但徽章仍会显示。 我只想导航到badge组件，而不显示仪表板屏幕。 下面是结果。 我已经修复了页眉和页脚，但即使导航成功，也会显示徽章。如果我从仪表板组件中删除。无法查看徽章内容。 有人能帮我解决这个问题吗。 提前谢谢

路由模块

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

---

访问子管线时，它不会离开父管线。它只会在父路由中包含一个新的子路由。在您的情况下，您总是在仪表板布线内，更改子布线只会重新绘制内部路由器出口的子布线区域

---

如果您希望有一条没有徽章菜单的路线，我相信您最好的方法是使用第一个路由器插座在相同级别的仪表板上创建路线。因此，您可以使用这个.router.navigate['/badge2']导航

仔细看，你可能会得到你需要的东西，这不是我面临的问题，你仍然可以看到你的徽章，因为它们位于路由器插座外的仪表板组件中，在那里，徽章组件的孩子将被注入..检查此项：@federicoscamuzzi。但是，在导航到单个徽章时，如何不显示徽章

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

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

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