Angular 12如何实现类似Material的button自定义color属性（不使用ngClass/class）

核心逻辑借助Angular原生的@HostBinding装饰器实现，和Angular Material UI的按钮color属性底层实现逻辑完全一致，不需要额外使用ngClass或外层class绑定。

具体实现步骤 #

1. 组件逻辑处理 #

在你已经创建的按钮组件类中，添加color输入属性，同时通过@HostBinding绑定宿主元素的class生成规则：

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

@Component({
  // 选择器可根据你的使用习惯调整，如果要让所有带color属性的原生button自动生效，可写为 button[color]
  selector: 'app-button, button[app-button]',
  // 模板可以保持你原有内置button的写法即可
  template: `<ng-content></ng-content>`,
  styleUrls: ['./button.component.css']
})
export class ButtonComponent {
  // 接收color输入属性
  @Input() color?: string;

  // 自动根据color值生成color-xxx的类挂载到宿主元素上
  @HostBinding('class')
  get generatedClass() {
    return this.color ? `color-${this.color}` : '';
  }
}

如果你的组件是在模板内部嵌套了原生button元素，不需要用宿主作为按钮载体，也可以不用@HostBinding，直接在内部button上绑定class即可：

<!-- button.component.html 你的按钮组件模板 -->
<button [class]="color ? 'color-' + color : ''">
  <ng-content></ng-content>
</button>

对应的ts只需要保留color输入属性即可：

@Input() color?: string;

2. 编写对应样式 #

在按钮组件的样式文件中，按color-属性值的规则编写样式即可：

/* button.component.css */
.color-primary {
  background: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
}

.color-myclass {
  /* 你自定义的myclass对应样式 */
  background: #722ed1;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
}

3. 业务中直接使用 #

不需要任何额外的class绑定，直接加color属性即可生效：

<!-- 基础使用写法 -->
<button app-button color="myclass">按钮</button>
<!-- 如果你把选择器设为button[color]，可以直接省略自定义属性，和你目标写法完全一致 -->
<button color="myclass">按钮</button>

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