Angular 5 - 使用InnerHtml绑定组件选择器

Question

我有一个我称为“app-component1”的component1选择器。

@Component({
   selector: 'app-component1',
   templateUrl: './test-widget.component.html',
   styleUrls: ['./test-widget.component.scss'] })

因此，为了调用此组件的html，我通常使用：

<app-component1></app-component1>

它完美无缺。

现在从另一个组件2我有以下变量：

variableToBind = "<app-component1></app-component1>";

在组件2的html中，我使用了以下内容：

<div [innerHtml]="varibableToBind"></div>

html代码绑定无效。有可能帮助我理解为什么，也许可以帮我找到另一种选择吗？

Answer 1

Angular清理HTML以防止XSS攻击。您应该在控制台输出中找到类似WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).的内容。

有关详细信息，请查看有关property binding（特别是内容安全性）和security docs的文档。

根据您的使用情况，您需要选择其他方法。

Answer 2

您的示例代码不是

的有效方法

1）出于安全原因，html代码不能直接绑定到元素属性。参考：https://angular.io/guide/security#xss

2）在您的情况下，不需要为HTML进行属性绑定。如果要在AppComponent2内执行不同的逻辑，最佳做法是对可以自定义组件行为的参数进行属性绑定：

<div>
    <app-component1 [prop1]="myVar1" [prop2]="myVar2"></app-component1>
</div>

然后您可以从组件属性而不是组件本身自定义它。这会更有意义。

Answer 3

感谢大家的建议，我实际上只是找到答案：

这不起作用，因为在Angular编译模板之后渲染了innerHtml。这意味着它在这个时间点无法理解您的选择器。

如果你们想要动态加载组件（或任何内容），你应该使用* ngIf。它对我来说非常好。