Angular 路由器出口刷新整个站点

首先为我的英语不好感到抱歉

我目前正在使用Angular 8构建的应用程序工作。对于路由，我们使用路由器出口

起初，我们用角材料制作了一个应用程序的模型。它在那里工作得非常好

  <mat-sidenav-container autosize class="sidenav-container" fixedInViewport="true">
    <mat-sidenav #sidenav mode="over">
      <mat-nav-list *ngIf="this.authService.userData!=null">
        <mat-list-item class ="sidenav-itemlist"> <a routerLink="/home"  routerLinkActive="active" (click)="sidenav.close()" >{{ "Home" | translate }}</a> </mat-list-item>            
        <mat-list-item class ="sidenav-itemlist"> <a routerLink="/about" routerLinkActive="active"  [routerLinkActiveOptions]="{ exact: true }" (click)="sidenav.close()">{{ "About" | translate }}</a> </mat-list-item>
        <mat-list-item> <a routerLink="/company" (click)="sidenav.close()">{{ "Menu.Companies" | translate }}</a> </mat-list-item>   
        <mat-list-item class ="sidenav-itemlist"> <a  routerLink="/login" routerLinkActive="active" (click)="sidenav.close() " >{{ "Log out" | translate }}</a> </mat-list-item>
      </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content >
        <router-outlet></router-outlet>
    </mat-sidenav-content>

  </mat-sidenav-container>

-->
-->

---

希望有人能帮忙。提前感谢。

您写道，更改路线时，所有站点都会重新加载？你这是什么意思？路由器插座内的所有内容都将更改，但菜单应保持不变。如果是这样的话，那么根据你的设置，这是正确的。我想说的是，当改变路由时，只有路由器出口被刷新，而不是像nav容器那样的所有站点。发生的事情是，当我更改取消路由时，所有内容都会再次加载。谢谢你的回复。你能试着在一个小的stackblitz中复制这个吗@老虎1902

  <div id="page">
    <header tabindex="0" *ngIf="this.authService.userData!=null">SOD Tool</header>
    <div id="nav-container" *ngIf="this.authService.userData!=null">
      <div class="bg"></div>
      <div class="button" tabindex="0">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </div>
      <div id="nav-content" tabindex="0" >
        <ul>
          <li><a routerLink="/home"  routerLinkActive="active" (click)="sidenav.close()" >{{ "Home" | translate }}</a></li>
          <li><a routerLink="/about" routerLinkActive="active"  [routerLinkActiveOptions]="{ exact: true }" (click)="sidenav.close()">{{ "About" | translate }}</a></li>
          <li><a routerLink="/company" (click)="sidenav.close()">{{ "Menu.Companies" | translate }}</a></li>
          <!-- <li><a href="#0">About</a></li> -->
          <li><a routerLink="/login" routerLinkActive="active" (click)="sidenav.close() " >{{ "Log out" | translate }}</a></li>
          <!-- <li class="small"><a href="#0">Facebook</a><a href="#0">Instagram</a></li> -->
        </ul>
      </div>
    </div>

    <main>
      <router-outlet></router-outlet>
    </main>

  </div>