如何让Angular2绑定innerHTML中的组件

Question

我想创建一个组件myApp,它将在控件的模板中嵌入HTML的属性.但是,某些HTML可能包含其他组件选择器.

import {InfoComponent} from ...
@Component({
    selector: 'myApp',
    template: `<div [innerHTML]='hData'></div>
               <myInfo></myInfo>`,
    directives: [InfoComponent]
})
export class AppComponent {
   hData = "<myInfo></myInfo>";
}

@Component({
   selector: 'myInfo',
   template: "<b>This is a test</b>"
})
export class InfoComponent {
}

在这个例子中,我希望看到This is a test显示两次.但是,似乎Angular2引擎没有注意到Component的选择器已被注入,因此模板永远不会为<myInfo></myInfo>通过绑定添加的选择器生成.

你可以在这里看到一个演示.

有没有办法让Angular2解析选择器的方式与在模板中显式添加的选择器相同？

Answer 1

无法实例化[innerHtml]="..."Angular 组件或指令或建立任何绑定。

最接近此要求的是DynamicComponentLoader。（DynamicComponentLoader 不久前已被删除）ViewContainerRef.createComponent()

有关示例，请参阅带有用户单击所选组件的 Angular 2 动态选项卡

自 RC.5 起，Angular2 就清理了通过绑定添加的样式和 HTML。有关更多详细信息，请参阅在 RC.1 中，某些样式无法使用绑定语法添加。