Angular 5-将组件选择器与InnerHtml绑定

问题描述

我有一个名为"app-component1"的component1选择器.

I have a component1 selector that I called "app-component1".

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

因此，我通常使用此组件的html来调用

So to call the html of this component I usually use:

<app-component1></app-component1>

它工作得很好.

现在来自另一个component2，我有以下变量:

Now from another component2 I have the following variable:

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

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

And In the html of component 2 I used the following:

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

html代码绑定不起作用.是否可以帮助我理解原因，也许还可以帮助我找到另一种选择?

The html code binding isn't working. Is is possible to help me understand why and maybe help me find another alternative?

推荐答案

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

Thanks Everyone for the suggestions, I actually just find the answer to this:

这是行不通的，因为在Angular编译模板后渲染了innerHtml.这意味着它目前无法理解您的选择器.

This can't work because innerHtml is rendered AFTER Angular's compiled the templates. That means that it doesn't understand your selectors at this point of time.

如果您想动态加载组件(或任何内容)，则应使用* ngIf.对我来说效果很好.

If you guys want to load a component (or any content) dynamically, you should use *ngIf. It worked perfectly fine for me.

这篇关于Angular 5-将组件选择器与InnerHtml绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！