Angular 2+如何通过变量值调用Material按钮指令？

首先得明确：你尝试的<button [type]>x</button>是行不通的，因为这里的[type]绑定的是HTML原生按钮的type属性（比如submit、reset这类），和Angular Material的mat-button/mat-raised-button指令完全不是一回事。Angular的指令是编译时解析的，没法直接通过变量值来"调用"指令，但我们有几种优雅的方式实现你的需求：

方案1：用条件渲染（*ngIf/ngSwitch） #

这是最直观的方式，根据type变量的值渲染对应的按钮：

用*ngIf实现 #

<button *ngIf="type === 'mat-button'" mat-button>x</button>
<button *ngIf="type === 'mat-raised-button'" mat-raised-button>x</button>

用ngSwitch实现（更适合多类型扩展） #

<ng-container [ngSwitch]="type">
  <button *ngSwitchCase="'mat-button'" mat-button>x</button>
  <button *ngSwitchCase="'mat-raised-button'" mat-raised-button>x</button>
  <!-- 可以继续添加其他按钮类型，比如mat-stroked-button -->
  <button *ngSwitchDefault mat-button>x</button>
</ng-container>

方案2：动态绑定指令的属性选择器 #

Angular Material的按钮指令是通过属性选择器实现的（比如mat-button的指令选择器是[mat-button]），所以我们可以通过条件绑定这些属性来启用对应的指令：

<button 
  [attr.mat-button]="type === 'mat-button' ? '' : null"
  [attr.mat-raised-button]="type === 'mat-raised-button' ? '' : null"
>
  x
</button>

这里的逻辑是：当type匹配时，给按钮添加对应的属性（空字符串表示该属性存在）；不匹配时设为null，Angular会自动移除这个属性，对应的指令也就不会生效。

方案3：复用复杂按钮内容（避免重复代码） #

如果按钮内部的内容很复杂，不想重复写多次，可以用ng-template来复用内容：

<!-- 定义可复用的按钮内容 -->
<ng-template #buttonContent>
  <!-- 这里放复杂的内容，比如图标、多行文本等 -->
  <mat-icon>favorite</mat-icon>
  点击我
</ng-template>

<!-- 根据type渲染不同按钮，复用内容 -->
<ng-container [ngSwitch]="type">
  <button *ngSwitchCase="'mat-button'" mat-button>
    <ng-container *ngTemplateOutlet="buttonContent"></ng-container>
  </button>
  <button *ngSwitchCase="'mat-raised-button'" mat-raised-button>
    <ng-container *ngTemplateOutlet="buttonContent"></ng-container>
  </button>
</ng-container>

总结一下：核心思路是利用Angular的条件渲染或动态属性绑定，间接实现根据变量值应用不同的Material按钮指令，因为指令本身无法直接通过变量动态绑定。

内容的提问来源于stack exchange，提问作者Pedro Guilherme Bueno