如何使Angular2绑定innerHTML中的组件

哈里斯

我想创建一个组件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解析选择器，就像在模板中显式添加的选择器一样？

贡特·佐赫鲍尔（GünterZöchbauer）

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

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。