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>

它工作得很好。

现在从另一个 component2 我有以下变量：

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

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

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

html 代码绑定不起作用。 是否有可能帮助我理解原因并可能帮助我找到另一种选择？

Answer 1

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

这是行不通的，因为 innerHtml 是在 Angular 编译模板之后呈现的。 这意味着它此时不了解您的选择器。

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

Answer 2

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

有关更多信息，请查看有关属性绑定（尤其是内容安全）的文档和安全文档。

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

Answer 3

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

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

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

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

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

Answer 4

如果您确实需要将HTML传递给组件（例如，如果您有带有<br>标签的文本或类似的东西），您可以像这样创建自定义Input ：

export class YourComponent {
  @Input() public htmlContent = '';
}

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

并像这样使用它：

<your-component [htmlDescription]="textWithHtmlTags"></your-component>

* - 例如，如果需要呈现带有基本HTML格式标记（如<b> 、 <i>甚至<br> ）的文本字符串。

Answer 5

在 Angular 中，一般不建议使用 [innerHTML] 绑定来绑定组件选择器，因为这会导致安全漏洞。 相反，您应该使用 Angular 的模板语法和组件结构将组件包含在您的模板中。

如果您需要根据某些条件动态选择要包含的组件，则可以使用 ngIf 指令和元素仅在满足特定条件时才包含组件。

<ng-template [ngIf]="showMyComponent">
  <my-component></my-component>
</ng-template>