角材料-设置按钮处于活动状态 [英] Angular Material - set button active

问题描述

我在Angular 5/Angular Materials应用程序中使用此导航:

I use this navigation in my Angular 5/Angular Materials application:

<!-- Navigation -->
<mat-toolbar color="warn">  
<mat-toolbar-row>
  <span class="nav-icon">
    My Icon
  </span>

  <span class="nav-spacer"></span>

  <button mat-button [routerLink]="['/home']">Home</button> 
  <button mat-button [routerLink]="['/login']">Login</button>
  <button mat-button (click)="logout()">Logout</button>
 </mat-toolbar-row>
</mat-toolbar>

<!-- Router Outlet -->
<router-outlet></router-outlet>

实际上我找不到如何将活动菜单按钮设置为活动状态.有没有办法做到这一点，例如路线吗?

Actually I could not find how to set the active menu button active. Is there a way of doing this, e.g. with Route?

推荐答案

在Angular 6中，您可以将 routerLinkActive 属性添加到按钮.当相应的路由为当前路由时，此属性的内容将添加到元素的css类中.

In Angular 6 you can add the routerLinkActive attribute to buttons. When the corresponding route is the current one, the content of this attribute will be added to the element's css classes.

例如:

<button mat-button [routerLink]="['/home']" routerLinkActive="mat-accent">
    Home
</button> 

单击此按钮，相应的路由变为活动路由，它将获得附加的 mat-accent CSS类.

When this button is clicked and the corresponding route becomes the active one, it will get the additional mat-accent CSS class.

参考: Angular.io文档， 查看全文