角度材料 - 设置按钮处于活动状态 [英] 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 版本 12.0.5 的活动类对我不起作用的人

Hopefully, this helps someone the active class was not working for me I'm using Angular version 12.0.5

我替换了:

<button mat-raised-button routerLink="/overview/anxietydepressionchart/{{id}}" routerLinkActive="activebutton">Anxiety Depression Graph</button>

与:

<a mat-raised-button routerLink="/overview/anxietydepressionchart/{{id}}" routerLinkActive="activebutton" >Anxiety Depression Graph</a>

CSS:

  .activebutton
 {
    background-color: rgb(51, 51, 51);
    color: white;
  }

这解决了我的活动按钮问题.

This solved my active button issues.

这篇关于角度材料 - 设置按钮处于活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！