angular - 如何在导航栏Angular 5+中使用标签内容？

Question

我已按照本教程了解 angular 5+ 中的选项卡。

html:

<div style="padding: 5px;">
  <nav mat-tab-nav-bar>
    <a mat-tab-link
       *ngFor="let routeLink of routeLinks; let i = index;"
       [routerLink]="routeLink.link"
       routerLinkActive
       #rla="routerLinkActive"
       [active]="activeLinkIndex === i"
       (click)="activeLinkIndex = i"
       [routerLinkActiveOptions]="{exact: true}"
       [class]=getActiveClass(i)>
      {{routeLink.label}}
    </a>
  </nav>
  <router-outlet></router-outlet>
</div>

我是 Angular 新手，不知道为什么我的所有内容都出现在我的导航栏内容中。而不是我正常Router-Outlet的app.component.html.

<div class='container-fluid'>
  <div class='row'>
    <div class='col-sm-3'>
      <app-nav-menu>Tabs goes here</app-nav-menu>
    </div>
    <div class='col-sm-9 body-content'>
      <router-outlet>My Main content usually comes here</router-outlet>
    </div>
  </div>
</div>

我的目标是只在导航栏中包含特定于选项卡（子部分）的内容，并且我的内容Router-Outlet像往常一样显示在主目录中。

标签： angularmat-tab