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>'}    ];}效果如下图:问题这种情况下，请问如何动态渲染tab页的组件，有如思路方向？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>

这样试试