Angular 5 Material - 当我更改routerLink时动态更改工具栏名称

Question

当我在sidenav上的页面之间切换时，我正在尝试动态更改材质工具栏名称。

App-component.html

<mat-sidenav-container class="all-wrap" >
  <mat-sidenav #sidenav>
    <mat-nav-list (click)="sidenav.close()">
      <a mat-list-item [routerLink]="['/']" > Home</a>
      <a mat-list-item [routerLink]="['/products']"> Products</a>
      <a mat-list-item [routerLink]="['/orders']"> Orders</a>
    </mat-nav-list>
  </mat-sidenav>

  <div class="page-wrap">
    <header role="banner">
      <mat-toolbar color="primary">
        <button type="button" mat-icon-button
          (click)="sidenav.open()"
          title="Menu">
          <mat-icon>menu</mat-icon>
        </button>
        <span  class="toolbar_name">Products</span>
      </mat-toolbar>
    </header>
      <router-outlet></router-outlet>
  </div>
</mat-sidenav-container>

Answer 1

在模板中，您可以将此行更改为变量：

<span  class="toolbar_name">{{productsVar}}</span>

然后在这个区域使用一个函数：

<a mat-list-item (click)="navigate('Products')" Products</a>

然后在你的组件类中有函数：

navigate(area: string) {
     this.productsVar = area;
     this.router.navigate([`/${area}`]);
}

确保从Angular导入“Router”并将其注入组件类，例如：

constructor(private router: Router){}

这样您就可以在班级中使用路由功能。如果您有任何疑问，请告诉我。