和子模块,angular,typescript,angular2-routing"/>
时间戳

首页 > 解决方案 > 了解顶层和子模块

angular - 了解顶层和子模块

问题描述

我是 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 }]}

标签： angulartypescriptangular2-routing

解决方案

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

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

推荐阅读