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