将 HTML 代码作为输入的 Angular 组件（续集）答案

【问题标题】：Angular component that takes HTML code as input (the sequel)将 HTML 代码作为输入的 Angular 组件（续集）
【发布时间】：2019-08-23 19:33:51
【问题描述】：

这个问题是我之前提出的问题的延续：previous question

我想做的是将 HTML 代码传递给 Angular 组件，以便它可以显示和执行。想法是将 HTML 代码作为字符串输入（在转义所有特殊字符后）传递给组件，然后使用管道绕过导航器的信任安全性，以便执行代码。

但是，如果 HTML 代码很长，将其作为字符串传递并转义所有特殊字符可能会非常繁琐。我的问题是：有什么方法可以在不通过输入的情况下传递我的 HTML 代码？如果没有，有没有比字符串更适合 HTML 代码的输入类型？

感谢您的帮助。

【问题讨论】：

【解决方案1】：

您可以简单地传递字符串，如图所示<div [innerHTML]="yourStringBindingHere"></div>

【讨论】：

【解决方案2】：

您可以使用<ng-content></ng-content>。如果将 ng-content 放在组件的模板中，则可以在其中插入 html 代码。它的工作原理是这样的：

应放置代码的组件模板

<div>
  <ng-content></ng-content>
</div>

现在你可以把代码放在组件的标签之间

<example-component>
  <p>Example Code</p>
  <p>More example code</p>
</example-component>

两个<p>会被插入到<ng-content>标签所在的位置

【讨论】：