Как использовать содержимое вкладок в навигационной панели Angular 5+?

Question

Я следовал этому руководству для вкладок в угловых 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 по-прежнему.