如何讓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 中，無法使用綁定語法添加某些樣式。