从字符串运行时生成Angular 5组件

时间:2017-12-29 04:00:37

标签: angular dynamic compilation render angular5

我正在寻找一种从字符串中动态显示组件的方法。

例如,现有组件:

<app-header></app-header

我需要将其包含在另一个组件中。我很乐意做类似的事情:

TS:

@ViewChild('componentHost1', { read: ViewContainerRef }) componentHost1: ViewContainerRef;

const componentFactory = this.componentFactoryResolver.resolveComponentFactory('<app-header></app-header>'); this.componentHost1.clear(); this.componentHost1.createComponent(componentFactory);

HTML:

<ng-template #componentHost1></ng-template>

我不知道组件在传递之前所以我不能仅使用实际组件中的组件使用字符串。

有没有办法从字符串中渲染/编译它以在另一个组件中使用?

或者更好的是,它会很棒:

<div [innerHtml]="'<app-header></app-header>'"></div>

0 个答案:

没有答案