Angular Material 动态绑定按钮类型遇mat-button非已知属性错误

你遇到的报错和是否正确导入MatButtonModule没有直接关联：
Angular Material 提供的所有按钮类型指令（包括mat-button、mat-raised-button、mat-stroked-button等），都是 无内置输入属性的属性型指令。这类指令的生效规则非常简单：只要DOM元素上存在对应选择器名，就自动匹配并应用指令内置的样式与交互逻辑，本身根本没有暴露可被方括号绑定的输入值。
你当前的写法是把这些指令当成了可以传入布尔值的可绑定属性做动态赋值，Angular模板编译器在编译阶段找不到对应名称的可绑定输入属性，自然会抛出「无法绑定到'mat-button'，因为它不是'button'元素的已知属性」的错误。
另外你写的组件类代码里还有个小笔误：定义type属性时字符串引号没有闭合，type: 'simple"'; 要改成 type: 'simple';，否则还没走到模板编译环节，就会先触发TypeScript编译报错。

正确的实现方式 #

因为Material的按钮指令是按选择器存在性匹配生效的，无法通过动态传值的方式切换按钮类型，需要通过模板分支按当前的type值渲染对应类型的按钮，常见的可靠实现有两种：

方法1：用*ngIf逐分支匹配 #

逻辑直观无额外依赖，适合按钮类型较少的场景：

<!-- 基础文本按钮 -->
<button *ngIf="type === 'simple'" mat-button>Text goes here</button>
<!-- 带阴影凸起按钮 -->
<button *ngIf="type === 'raised'" mat-raised-button>Text goes here</button>
<!-- 描边按钮 -->
<button *ngIf="type === 'stroked'" mat-stroked-button>Text goes here</button>
<!-- 无描边扁平按钮 -->
<button *ngIf="type === 'flat'" mat-flat-button>Text goes here</button>
<!-- 圆形图标按钮 -->
<button *ngIf="type === 'icon'" mat-icon-button>
  <mat-icon>home</mat-icon>
</button>
<!-- 大尺寸悬浮操作按钮 -->
<button *ngIf="type === 'fab'" mat-fab>
  <mat-icon>add</mat-icon>
</button>
<!-- 小尺寸悬浮操作按钮 -->
<button *ngIf="type === 'mini-fab'" mat-mini-fab>
  <mat-icon>edit</mat-icon>
</button>

这种写法完全匹配Material的指令编译规则，不会出现多个指令同时匹配的冲突问题，不同按钮对应的点击涟漪效果、尺寸规范、禁用态样式都能正常生效，也是官方文档示例里一贯采用的写法。

方法2：用NgSwitch简化多分支代码 #

当按钮类型较多时，可以用ngSwitch减少重复的条件判断代码，本质和*ngIf分支的运行逻辑完全一致：

<ng-container [ngSwitch]="type">
  <button *ngSwitchCase="'simple'" mat-button>Text goes here</button>
  <button *ngSwitchCase="'raised'" mat-raised-button>Text goes here</button>
  <button *ngSwitchCase="'stroked'" mat-stroked-button>Text goes here</button>
  <button *ngSwitchCase="'flat'" mat-flat-button>Text goes here</button>
  <button *ngSwitchCase="'icon'" mat-icon-button>
    <mat-icon>star</mat-icon>
  </button>
  <button *ngSwitchCase="'fab'" mat-fab>
    <mat-icon>add</mat-icon>
  </button>
  <button *ngSwitchCase="'mini-fab'" mat-mini-fab>
    <mat-icon>edit</mat-icon>
  </button>
</ng-container>

踩坑提醒：不要尝试通过运行阶段动态给元素添加按钮指令名的方式实现类型切换。Angular的指令匹配是在模板编译阶段就完成的，运行时动态追加的选择器名不会被识别为Material指令，对应的样式和交互逻辑完全不会生效。

内容的提问来源于stack exchange，提问作者Zeyad Ahmad Aql