如何在属性选择器的Angular自定义按钮中集成mat-flat-button指令？

要在保留button[m-primary-btn]属性选择器的同时自动集成mat-flat-button指令，核心是利用Angular的宿主元素配置，让组件自动为原生按钮元素添加mat-flat-button属性——因为Angular Material的属性型指令仅需元素上存在对应属性即可生效。

修改后的组件代码 #

import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'button[m-primary-btn]',
  template: '<ng-content></ng-content>',
  styleUrls: ['./button.component.scss'],
  standalone: true,
  imports: [MatButtonModule],
  host: {
    'class': 'primary',
    // 自动添加mat-flat-button属性，触发Material指令
    'mat-flat-button': ''
  }
})
export class PrimaryButtonComponent {}

原理说明 #

• Angular的host配置允许我们为组件的宿主元素（即这里的<button>）设置属性、类或事件绑定。添加'mat-flat-button': ''后，所有使用<button m-primary-btn>的实例都会自动带上mat-flat-button属性，Angular Material的MatFlatButton指令会自动识别并应用其样式与行为。
• 这种方式完全保留了原生按钮的所有功能（如type、disabled等原生属性的支持），同时无需手动为每个按钮实例添加mat-flat-button指令。

样式兼容提示 #

如果自定义的.primary类与Material的按钮样式存在冲突，可以通过调整SCSS的选择器优先级来解决，例如：

button[m-primary-btn].mat-flat-button {
  // 自定义样式，优先级高于Material默认样式
  background-color: #your-primary-color;
  color: white;
}

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