Question

我的网页上有一个带有项目列表的标题，每个项目中都有一个mat-icon子级。以下是其中一项。

<a [routerLink]="[ '/admin' ]" > 
   <button routerLink="['/admin']" routerLinkActive="active">
       <mat-icon color="warn">history</mat-icon>Audit
   </button>
</a>

routerLinkActive="active"上的CSS在按钮文本上效果很好，但我也想更改mat-icon的颜色，但似乎无济于事

Answer 1

最简单的方法是将其添加到CSS中-可能最好的方法是在全局中添加它：

  `app.use(express.urlencoded({ extended: true }));`

Answer 2

看看这个answer，您可以做这样的事情

<a [routerLink]="[ '/admin' ]" > 
   <button routerLink="['/admin']" routerLinkActive="active" #rla="routerLinkActive">
       <mat-icon [ngClass]="{'color': rla.isActive ? 'warn' : 'primary'}">history</mat-icon>Audit
   </button>
</a>

或这个

<a [routerLink]="[ '/admin' ]" > 
   <button routerLink="['/admin']" routerLinkActive="active" #rla="routerLinkActive">
       <mat-icon [ngStyle]="{'color': rla.isActive ? 'warn' : 'primary'}">history</mat-icon>Audit
   </button>
</a>

请注意，这些答案未经测试

Answer 3

RouterLinkActive将变量导出到模板，并具有一个告诉您当前处于活动状态的属性。

https://angular.io/api/router/RouterLinkActive#properties

https://github.com/angular/angular/blob/ead169a4022e2a2f5520e1c1a58f30692b90f7cd/packages/router/src/directives/router_link_active.ts#L77

   <button routerLink="['/admin']" routerLinkActive="active" #rla="routerLinkActive">
      <mat-icon [color]="rla.isActive && 'warn'">history</mat-icon>Audit
  </button>

如果warn的属性isActive为 true ，则上述将颜色设置为routerLinkActive。

Answer 4

<li>
            <a routerLink="/Clients" routerLinkActive="active">
                <span class="menu_icon"><i class="material-icons">group</i></span>
                <span class="menu_title">Clients</span>
            </a>
        </li>

> add this sytle in global css


.active i {
        color: #28A745;
    }
    .active span {
        color: #28A745;
    }

在routerLinkActive =“ active”上更改按钮内子mat-icon的颜色

4 个答案: