如何让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显示两次This is a test 。 但是，Angular2 引擎似乎并没有发现 Component 的选择器已被注入的事实，因此永远不会为通过绑定添加的<myInfo></myInfo>选择器生成模板。

您可以在此处查看演示。

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

Answer 1

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

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

有关示例，请参阅Angular 2 dynamic tabs with user-click selected components

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