Angular SideNav 不会根据路由更新内容答案

【问题标题】：Angular SideNav doesn't update content according to routeAngular SideNav 不会根据路由更新内容
【发布时间】：2022-01-18 19:43:52
【问题描述】：

我正在尝试创建一个固定的 sidenav，它会根据路线更新其内容。它不适用于导航，仅在刷新页面后。我做错了什么？

App.component.ts

export class AppComponent {
  title = 'foo';
  showSideNav = false;

  constructor(private router: Router ) {

    this.router.events.subscribe((e) => {
      if (e instanceof NavigationEnd) {
        this.showSideNav = e.url != "/login";
      }
    });
  }
}

App.component.html

<app-header></app-header>

<mat-sidenav-container *ngIf="showSideNav">
  <mat-sidenav mode="side" opened>
  
      <h4 class="name">Foo</h4>
      <p class="designation">Barr</p>

      <mat-divider></mat-divider>
      <button mat-button class="menu-button" [routerLink]="['/baar']">
          <mat-icon>dangerous</mat-icon>
          <span>baar</span>
      </button>  
  </mat-sidenav>
  <mat-sidenav-content>
      <div class="content mat-elevation-z8">
          <router-outlet></router-outlet>
      </div>
  </mat-sidenav-content>
</mat-sidenav-container>

<router-outlet *ngIf="!showSideNav"></router-outlet>

【问题讨论】：

标签： angular routes angular-material navigation sidenav

【解决方案1】：

将 routerlink 更改为 routerLink="/baar"。检查下面的代码。

<app-header></app-header>

<mat-sidenav-container *ngIf="showSideNav">
  <mat-sidenav mode="side" opened>
  
      <h4 class="name">Foo</h4>
      <p class="designation">Barr</p>

      <mat-divider></mat-divider>
      <button mat-button class="menu-button" routerLink="/baar">
          <mat-icon>dangerous</mat-icon>
          <span>baar</span>
      </button>  
  </mat-sidenav>
  <mat-sidenav-content>
      <div class="content mat-elevation-z8">
          <router-outlet></router-outlet>
      </div>
  </mat-sidenav-content>
</mat-sidenav-container>

<router-outlet *ngIf="!showSideNav"></router-outlet>

【讨论】：

我仍然无法让它工作。地址栏显示了所需的路线，但里面的组件没有改变。它仅在页面刷新后更改。