路由器插座刷新整个站点

Question

首先抱歉我的英语不好。

我目前正在使用Angular 8构建的应用程序中工作。对于路由，我们使用的是 Router-Outlet

首先，我们使用Angular材质制作了该应用程序的模型。而且在那里工作非常完美

  <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>

此后，我们从实际的应用程序开始（撇开Material）。但是，这样做之后，在更改路线时，所有站点都会重新加载，不仅是预期的组件，而且我不确定为什么会发生

  <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>

希望有人可以提供帮助。预先感谢。