Angular回调中纯文本转HTML渲染的问题求助

我有一个可自定义列的复用表格组件，操作列配置如下：

{
  columnDef: 'action',
  header: 'Action',
  cell: ColumnTypeEnum.ActionColumn,
  options: {
    template: ['approve', 'cancel', 'print', 'inline-edit', 'view', 'delete'],
    buttons: {
      approve: (element: any) => {
        return `<a mat-icon-button [routerLink]="approve/${element.id}" color="primary">
            <mat-icon>thumb_up</mat-icon>
          </a>`;
      },
      cancel: (element: any) => {
        return `<a mat-icon-button [routerLink]="cancel/${element.id}" color="warn">
            <mat-icon>thumb_down</mat-icon>
          </a>`;
      },
      print: (element: any) => {
        return `<a mat-icon-button [routerLink]="print/${element.id}" color="primary">
            <mat-icon>print</mat-icon>
          </a>`;
      },
    },
  },
}

对应的ActionColumnComponent代码：

@Component({
  selector: 'app-action-column',
  templateUrl: './action-column.component.html',
  styleUrls: ['./action-column.component.scss'],
})
export class ActionColumnComponent {
  @Input() element!: ModelInterface;
  @Input() isInModeRowEditable: boolean = false;
  @Input() withRowInlineEdit: boolean = true;
  @Input() options: any;

  @Output() readonly displayDeleteConfirmation = new EventEmitter();
  @Output() readonly toggleRowInlineEdit = new EventEmitter();

  confirmDelete(element: any) {
    this.displayDeleteConfirmation.emit(element);
  }

  inlineEditableRowToggle(element: any) {
    this.toggleRowInlineEdit.emit(element);
  }
}

组件模板文件：

<ng-container *ngFor="let action of options.template">
    <ng-container [ngSwitch]="action">
      <ng-container *ngSwitchCase="'inline-edit'">
        <app-inline-edit-row
          [element]="element"
          [withRowInlineEdit]="withRowInlineEdit"
          (toggleRowInlineEdit)="inlineEditableRowToggle($event)"
        />
      </ng-container>

      <ng-container *ngSwitchCase="'view'">
        <ng-container *ngTemplateOutlet="view"></ng-container>
      </ng-container>

      <ng-container *ngSwitchCase="'update'">
        <ng-container *ngTemplateOutlet="update"></ng-container>
      </ng-container>

      <ng-container *ngSwitchCase="'delete'">
        <ng-container *ngTemplateOutlet="delete"></ng-container>
      </ng-container>

      <ng-container *ngSwitchDefault>
        <ng-container *ngIf="options.buttons[action]; else errorCustomAction">
          {{ options.buttons[action](element) }}
        </ng-container>

        <ng-template #errorCustomAction>
          <small> {{ action }} is undefined in `buttons` element </small>
        </ng-template>
      </ng-container>
    </ng-container>
  </ng-container>

当前问题：调用{{ options.buttons[action](element) }}时，返回的HTML字符串直接以纯文本形式显示，未渲染为实际的按钮元素。

核心说明 #

Angular的插值表达式{{ }}会自动转义HTML，所以直接输出会显示纯文本。另外，如果HTML中包含[routerLink]这类Angular指令，直接用HTML字符串渲染无法触发指令解析，因为Angular不会编译动态插入的HTML。需根据场景选择对应方案：

场景1：静态HTML（无Angular指令） #

如果按钮不需要Angular指令，仅需渲染静态HTML，修改模板的默认分支：

<ng-container *ngSwitchDefault>
  <ng-container *ngIf="options.buttons[action]; else errorCustomAction">
    <span [innerHTML]="options.buttons[action](element)"></span>
  </ng-container>

  <ng-template #errorCustomAction>
    <small> {{ action }} is undefined in `buttons` element </small>
  </ng-template>
</ng-container>

用[innerHTML]属性绑定替代插值表达式，Angular会将字符串解析为HTML并渲染。

场景2：带Angular指令（如[routerLink]） #

此场景下innerHTML无法解析Angular指令，需换用组件化的实现方式：

方法：修改按钮配置为参数化结构 #

将按钮配置从返回HTML字符串改为返回路由、图标、颜色等参数，在组件模板中统一渲染按钮：

1. 更新操作列配置：

{
  columnDef: 'action',
  header: 'Action',
  cell: ColumnTypeEnum.ActionColumn,
  options: {
    template: ['approve', 'cancel', 'print', 'inline-edit', 'view', 'delete'],
    buttons: {
      approve: (element: any) => ({
        routerLink: `approve/${element.id}`,
        color: 'primary',
        icon: 'thumb_up'
      }),
      cancel: (element: any) => ({
        routerLink: `cancel/${element.id}`,
        color: 'warn',
        icon: 'thumb_down'
      }),
      print: (element: any) => ({
        routerLink: `print/${element.id}`,
        color: 'primary',
        icon: 'print'
      }),
    },
  },
}

2. 修改ActionColumnComponent模板的默认分支：

<ng-container *ngSwitchDefault>
  <ng-container *ngIf="options.buttons[action]; else errorCustomAction">
    <a mat-icon-button 
       [routerLink]="options.buttons[action](element).routerLink" 
       [color]="options.buttons[action](element).color">
      <mat-icon>{{ options.buttons[action](element).icon }}</mat-icon>
    </a>
  </ng-container>

  <ng-template #errorCustomAction>
    <small> {{ action }} is undefined in `buttons` element </small>
  </ng-template>
</ng-container>

这种方式符合Angular组件化思想，能正确解析所有指令和绑定，同时保证代码的可维护性。

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