Angular

Question

我正在构建一个组件，它基本上是一个重复使用某些 Angular Material 机制的菜单，我希望允许用户动态添加一些图标，以便他们能够添加一些交互性，例如 onclick事件（例如）。

我在我的组件逻辑 (.ts) 中是这样设置的：

@Input() additionalIcons: string;

这是我的模板：

<my-component>
  <mat-expansion-panel-header>
    <mat-panel-title>
      <h4>{{ title }}</h4>
    </mat-panel-title>
    <div class="additional-icons" [innerHTML]="additionalIcons"></div>
  </mat-expansion-panel-header>
</my-component>

所以当我调用我的组件时，我希望能够在调用它时以这种方式传递一组图标：

<my-component
  param1
  ...
  additionalIcons=`<mat-icon aria-label="Label">settings</mat-icon>`
>
</my-component>

但这样做是行不通的，因为 - 我相信 - 出于某些安全原因，HTML 已被删除。这是我得到的结果：

我也试过这种方法：

ngOnInit() {
    if (typeof this.additionalIcons === "string") {
      this.additionalIcons = this.sanitizer.bypassSecurityTrustHtml(this.additionalIcons);
    }
  }

但视觉效果是一样的（出现“设置”而不是图标）

你会如何处理这个问题？感谢您的宝贵时间！

Answer 1

DanGo的回答很直接。这就是为什么它没有像您预期的那样工作。

来自

Angular doesn't process HTML added dynamically, it just adds it verbatim except some sanitization to prevent security issues.

Angular 不会将 Web 组件添加到注册表中，因此浏览器不知道 mat-icon 是一个组件，因此它不显示任何内容。

Angular - 将动态 HTML 作为变量传递给组件

Angular - Passing dynamic HTML to component as variable

templates

dynamic