Angular 5中如何基于Material主题设置文本颜色（无需自定义CSS）

嘿，这个问题我之前也碰到过！其实原因很简单：color属性是Angular Material组件（比如mat-button、mat-card这类官方组件）特有的输入属性，普通HTML元素像<span>并没有内置这个指令，所以直接写<span color="primary">肯定不会生效。

下面给你两种符合需求的解决方案，都不用自定义CSS类，完全基于Angular Material主题实现：

方案1：用CSS变量绑定样式 #

首先在你的全局样式文件（比如styles.scss）里，把Material主题的颜色导出成CSS变量：

@import '~@angular/material/theming';
@include mat-core();

// 这里用你项目里的主题配置，替换成自己的调色板
$primary: mat-palette($mat-blue);
$accent: mat-palette($mat-pink);
$warn: mat-palette($mat-red);
$theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($theme);

// 导出主题颜色为CSS变量
:root {
  --primary-text-color: mat-color($primary);
  --accent-text-color: mat-color($accent);
  --warn-text-color: mat-color($warn);
}

然后在模板里直接用style绑定这些变量：

<span [style.color]="'var(--primary-text-color)'">这是主色调文本</span>
<span [style.color]="'var(--accent-text-color)'">这是强调色调文本</span>
<span [style.color]="'var(--warn-text-color)'">这是警告色调文本</span>

这种方法简单直接，不用额外写组件或指令，完全利用CSS变量和Material主题。

方案2：自定义一个color指令（和Material组件用法一致） #

如果你希望像使用Material组件那样，直接给普通元素加color="primary"，可以写一个超简单的属性指令：

首先创建指令文件color.directive.ts：

import { Directive, Input, ElementRef, OnInit } from '@angular/core';
import { ThemePalette } from '@angular/material/core';

@Directive({
  selector: '[color]'
})
export class ColorDirective implements OnInit {
  @Input() color: ThemePalette = 'primary';

  constructor(private el: ElementRef) { }

  ngOnInit(): void {
    // 从全局CSS变量中获取对应颜色
    const rootStyle = getComputedStyle(document.documentElement);
    let colorValue = '';
    
    switch(this.color) {
      case 'accent':
        colorValue = rootStyle.getPropertyValue('--accent-text-color');
        break;
      case 'warn':
        colorValue = rootStyle.getPropertyValue('--warn-text-color');
        break;
      default:
        colorValue = rootStyle.getPropertyValue('--primary-text-color');
    }

    this.el.nativeElement.style.color = colorValue.trim();
  }
}

然后在你的模块里声明这个指令：

import { NgModule } from '@angular/core';
import { ColorDirective } from './color.directive';
// 其他导入...

@NgModule({
  declarations: [
    // 其他组件...
    ColorDirective
  ],
  // 其他配置...
})
export class AppModule { }

现在你就可以像用Material组件一样给普通元素加color属性了：

<span color="primary">主色调文本</span>
<span color="accent">强调色调文本</span>
<span color="warn">警告色调文本</span>

这个方法完全模拟了Material组件的color属性用法，用起来特别顺手。

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