angular - 如何让Angular2在innerHTML中绑定(bind)组件

Question

我想创建一个组件 myApp它将在其模板中嵌入来自 Controller 属性的 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 引擎似乎并没有意识到已注入(inject)组件的选择器这一事实，因此永远不会为 <myInfo></myInfo> 生成模板。通过绑定(bind)添加的选择器。

你可以看到一个demo here .

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

Answer 1

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

最接近此要求的是 DynamicComponentLoader . (DynamicComponentLoader 前段时间被移除了)ViewContainerRef.createComponent()

参见 Angular 2 dynamic tabs with user-click chosen components举个例子

自 RC.5 以来，Angular2 清理了通过绑定(bind)添加的样式和 HTML。参见 In RC.1 some styles can't be added using binding syntax了解更多详情。