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

Posted 2023-04-13

【中文标题】Angular SideNav 不会根据路由更新内容

【英文标题】：Angular SideNav doesn't update content according to route

【发布时间】：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>

【参考方案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>

【讨论】：

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