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

Posted 2023-02-23

【中文标题】Angular 5 - 使用 InnerHtml 绑定组件选择器

【英文标题】：Angular 5 - Bind a component selector with InnerHtml

【发布时间】：2018-06-26 22:29:51

【问题描述】：

我有一个 component1 选择器，我称之为“app-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 代码绑定不起作用。是否有可能帮助我理解原因并可能帮助我找到另一种选择？

【问题讨论】：

为什么你使用variableToBind而不是直接在你的模板中放入<app-component1></app-component1>？如果你想根据条件选择不同的组件，路由或者*ngIf可以替代吗？

【参考方案1】：

感谢大家的建议，其实我只是找到了这个问题的答案：

这不起作用，因为 innerHtml 是在 Angular 编译模板之后呈现的。这意味着它目前不理解您的选择器。

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

【参考方案2】：

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

如需更多信息，请查看property binding（尤其是内容安全）和security docs 上的文档。

根据您的用例，您需要选择另一种方法。

【参考方案3】：

您的示例代码不是有效的方法，因为

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

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

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

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