如何点击Angular2/4 Material标签时动态修改文本颜色？

嘿，这个问题我之前踩过坑！结合你说的“路由跳转回来颜色就正常了”的情况，大概率是Angular变更检测没及时触发，或者Material标签的内置样式优先级盖过了你的[ngStyle]，给你几个靠谱的解决方案：

1. 手动触发变更检测 #

有时候点击事件里更新变量后，Angular的自动变更检测没捕捉到（比如在一些异步逻辑、第三方回调里更新变量时容易出现），手动触发一下就能解决：

首先在组件里注入ChangeDetectorRef：

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.html'
})
export class YourComponent {
  isTagClicked = false;

  constructor(private cdr: ChangeDetectorRef) {}

  onTagClick() {
    this.isTagClicked = true;
    // 手动通知Angular更新视图
    this.cdr.detectChanges();
  }
}

模板里绑定点击事件和[ngStyle]：

<mat-tab-group>
  <mat-tab 
    label="我的标签" 
    (click)="onTagClick()"
    [ngStyle]="{'color': isTagClicked ? '#ff4081' : '#000'}"
  >
    <!-- 标签内容 -->
  </mat-tab>
</mat-tab-group>

2. 用[ngClass]配合穿透样式（解决优先级问题） #

如果上面的方法没用，那可能是Material标签的内置CSS类优先级比[ngStyle]高，这时候用自定义类+::ng-deep穿透会更稳妥：

组件逻辑不变，模板换成[ngClass]：

<mat-tab-group>
  <mat-tab 
    label="我的标签" 
    (click)="onTagClick()"
    [ngClass]="{'active-tag': isTagClicked}"
  >
    <!-- 标签内容 -->
  </mat-tab>
</mat-tab-group>

然后在组件的CSS里添加穿透样式：

::ng-deep .active-tag .mat-tab-label-content {
  color: #ff4081 !important;
}

这里的::ng-deep是为了突破Angular的组件样式隔离——因为Material标签的文本内容嵌套在子组件里，必须穿透才能让自定义样式生效。

3. 确认点击事件绑定的位置 #

最后检查一个细节：你是不是把点击事件绑在了mat-tab-group上，而不是mat-tab本身？只有绑定在mat-tab元素上，点击标签文本时才会触发事件哦！

按上面的方法试一遍，应该就能解决点击后立即变色的问题了～

内容的提问来源于stack exchange，提问作者Rolando