Angular 如何按条件为元素包裹带matBadge的span标签？

你之前的写法本身也无法正常运行，因为Angular的模板插值{{ }}仅支持输出表达式计算结果，不能直接在内部编写HTML标签。符合规范的常用实现方案有两种：

方案1：全版本兼容方案（基于ng-template复用内容） #

该方案不需要重复编写公共的链接代码，兼容所有Angular版本，也是最推荐的通用实现：

<!-- 定义可复用的链接模板 -->
<ng-template #linkTemplate>
  <a mat-button color="accent" [routerLink]="record.id">
    {{record[column.name]}}
  </a>
</ng-template>

<!-- 条件判断渲染结构 -->
<ng-container *ngIf="value1 > value2; else linkTemplate">
  <span matBadge="New" matBadgeOverlap="true">
    <ng-container *ngTemplateOutlet="linkTemplate"></ng-container>
  </span>
</ng-container>

方案2：Angular 17+ 简化控制流方案 #

如果你的项目已经升级到Angular 17及以上版本，可以使用原生的新控制流语法，写法更简洁直观：

@if (value1 > value2) {
  <span matBadge="New" matBadgeOverlap="true">
}
<a mat-button color="accent" [routerLink]="record.id">
  {{record[column.name]}}
</a>
@if (value1 > value2) {
  </span>
}

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