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

【问题标题】：Angular - Passing dynamic HTML to component as variableAngular - 将动态 HTML 作为变量传递给组件
【发布时间】：2021-12-23 11:14:36
【问题描述】：

我正在构建一个组件，它基本上是一个重用一些 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);
    }
  }

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

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

【问题讨论】：

你解决了如何动态添加带有属性的MatIcon组件吗？我需要将 svgIcon 属性添加到组件以加载正确的图标，但我不知道如何使用 ViewContainerRef 或 resolveComponentFactory
我终于在我的模板中使用了一个 *ngFor 指令，该指令绑定到我的图标数组（即：['add', 'settings']），并为每个生成一个右侧图标

标签： angular templates dynamic

【解决方案1】：

DanGo 的答案很简单。这就是它无法按预期工作的原因。

来自https://stackoverflow.com/a/40474494

Angular 不处理动态添加的 HTML，它只是逐字添加它，除了一些清理以防止安全问题。

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

【讨论】：

感谢您的回答，我会深入研究这些主题！