angular标签页动态渲染组件

Question

业务需求：需要实现动态页签(页签功能已实现)，并在标签内容页渲染组件。

html代码

<p-tabView>
    <p-tabPanel *ngFor="let item of tabPanels" header="{{item.title}}">
        <!-- <jhi-tabpage1></jhi-tabpage1> -->
        <!-- 直接写组件<jhi-tabpage1>可以正常渲染，但使用下面的动态{{}}就只渲染标签字符串 -->
        {{content}}
    </p-tabPanel>
</p-tabView>

Anguar代码

ngOnInit() {
    this.tabPanels = [
        {title: '页签1', content: '<jhi-tabpage1></jhi-tabpage1>'},
        {title: '页签2', content: '<jhi-tabpage2></jhi-tabpage2>'}
    ];
}

效果如下图:

问题

1. 这种情况下，请问如何动态渲染tab页的组件，有如思路方向？

2. ComponentFactoryResolver? DynamicComponentLoader? 建议如何实现此情况?

感谢各位大神的关注！

Answer 1

<p-tabView>
    <p-tabPanel *ngFor="let item of tabPanels" header="{{item.title}}">
        <!-- <jhi-tabpage1></jhi-tabpage1> -->
        <!-- 直接写组件<jhi-tabpage1>可以正常渲染，但使用下面的动态{{}}就只渲染标签字符串 -->
        <div [innerHtml]="item.content"></div>
        {{content}}
    </p-tabPanel>
</p-tabView>

这样试试

Answer 2

我们有一个业务类似，ViewContainerRef有一个createComponent方法，它接收resolveComponentFactory方法返回的component实例。参考文档动态组件