物料导航不加载路由器出口

Question

我的导航栏没有在其中加载嵌套的路由器出口。如果我将路由器的插座放在导航栏的外面，它可以工作，但是布局完全被浪费了。  我尝试了以下方法：

应用组件：

<app-main-nav>
    <router-outlet></router-outlet>

</app-main-nav>

这是我的导航：

<mat-sidenav-container class="sidenav-container">


  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
  [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
  [mode]="(isHandset$ | async) ? 'over' : 'side'"
  [opened]="!(isHandset$ | async)">
   <mat-toolbar>Menu</mat-toolbar>
   <mat-nav-list>
  <a mat-list-item href="#">Link 1</a>
  <a mat-list-item href="#">Link 2</a>
  <a mat-list-item href="#">Link 3</a>
 </mat-nav-list>
 </mat-sidenav>
 <mat-sidenav-content>
  <mat-toolbar color="primary">
  <button
    type="button"
    aria-label="Toggle sidenav"
    mat-icon-button
    (click)="drawer.toggle()"
    *ngIf="isHandset$ | async">
    <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
  </button>
    <span>Heimatvoll</span>
    </mat-toolbar>
   <!-- Add Content Here -->
 </mat-sidenav-content>