html - Angular 5 - 使用 InnerHtml 绑定(bind)组件选择器

我有一个名为“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 代码绑定(bind)不起作用。是否有可能帮助我理解为什么并可能帮助我找到另一种选择？

最佳答案

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

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

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

关于html - Angular 5 - 使用 InnerHtml 绑定(bind)组件选择器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48311330/