Question

我从后端获取一些html，并且其中包含带有属性绑定的标签

fetchedHtml = `<ngx-charts-bar-vertical
  [customColors]="customColors"
  [showDataLabel]="true"
  [results]="BarChartDataInput"
  [xAxis]="true"
  [yAxis]="true"
  [legend]="false"
  [showXAxisLabel]="false"
  [xAxisLabel]="xAxisLabel"
  [showYAxisLabel]="true"
  [yAxisLabel]="yAxisLabel"
>
</ngx-charts-bar-vertical>
  `;

现在，我想在动态生成的或正常的组件中呈现该html，我在这里看到了一个很好的示例https://stackblitz.com/edit/dynamic-raw-template?file=src%2Fapp%2Fdynamic-template.component.ts 在这个例子中，他正在使用 compile.compileModuleAndAllComponentsAsync()要求将NgModule作为参数传递，但是我想知道如何直接插入组件，而不是创建动态的NgModule。

Answer 1

您可以在Angular DomSanitizer中使用方法bypassSecurityTrustHtml()。

只需将其注入要使用 HTML 的组件中，如下所示：

constructor(public sanitizer: DomSanitizer) {}

然后将html注入到您的模板中，如下所示：

<span [innerHtml]="sanitizer.bypassSecurityTrusHtml(YOUR_HTML_STRING_HERE)"></span>

有关更多信息，请参见文档：here

如何使用数据绑定呈现动态HTML

1 个答案: