理解顶层 <router-outlet> 和子模块 <router-outlet>

Posted 2023-02-22

【中文标题】理解顶层 <router-outlet> 和子模块 <router-outlet>

【英文标题】：Understanding Top level <router- outlet> and sub module <router-outlet>

【发布时间】：2020-01-19 06:08:52

【问题描述】：

我是 Angular 框架的新手并正在创建一个 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 ]

【问题讨论】：

看看这个你可能会得到你需要的***.com/questions/29038596/…

这不是我面临的问题

您仍然可以看到您的徽章，因为它们位于路由器插座之外的仪表板组件中（将注入徽章组件g子项的位置）..

检查这个：***.com/questions/41857876/…

@federicoscamuzzi。但是如何在导航到单个徽章时也不显示徽章

【参考方案1】：

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

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