Angular中如何优雅地为HTML标签按条件分配属性

你原来的插值写法无法生效，因为Angular的属性型指令（比如mat-raised-button和mat-button）不能通过字符串插值直接渲染。下面提供几种更简洁的方案，避免代码重复：

方案1：动态绑定指令属性 #

利用Angular的属性绑定语法，根据条件控制指令属性的存在与否：

<button 
    [attr.mat-raised-button]="condition ? '' : null"
    [attr.mat-button]="condition ? null : ''"
    class="edit-button"
>
  <span>Click here</span>
</button>

• 当condition为true时，mat-raised-button属性会被渲染（空字符串值足以触发指令），mat-button属性设为null则不会被渲染；
• 反之则mat-button生效，mat-raised-button被移除。

方案2：抽离重复内容到模板 #

如果按钮内容复杂，可将重复部分抽成独立模板，通过ngTemplateOutlet复用：

<!-- 条件渲染不同按钮类型 -->
<button *ngIf="condition; else regularBtn" mat-raised-button class="edit-button">
  <ng-container *ngTemplateOutlet="btnContent"></ng-container>
</button>
<ng-template #regularBtn>
  <button mat-button class="edit-button">
    <ng-container *ngTemplateOutlet="btnContent"></ng-container>
  </button>
</ng-template>

<!-- 复用的按钮内容模板 -->
<ng-template #btnContent>
  <span>Click here</span>
</ng-template>

这种方式只需要维护一份按钮内容，避免重复编写相同的HTML结构。

方案3：类绑定简化（Material特定场景） #

部分Material按钮指令可通过对应CSS类间接生效，也可以结合类绑定实现：

<button 
    [class.mat-raised-button]="condition"
    [class.mat-button]="!condition"
    class="edit-button"
>
  <span>Click here</span>
</button>

注意：这种方式依赖Material指令对应的CSS类，复杂指令可能无法仅通过类名触发，优先推荐方案1。

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