如何解决PrimeNg TabView 动态组件
我正在遵循 this 方法基于配置 JSON 在 Angularapp 中动态创建元素。 不幸的是,这似乎不适用于所有 PrimeNG 组件。尤其不是我也想使用的 TabView。
我对 Angular 不是很熟悉,但已经尝试了一整天。在我看来,根本问题与 TabView 如何识别 DOM 中继承的 TabPanels 相关,但不幸的是,这不是我可以更改的 - 可以吗?
此外,似乎有一个 GitHub issue 与此相关,但事实证明他们最终编写了自定义选项卡组件。有没有人看到解决这个问题的方法?它与 Prime 堆栈中的其他对象/元素配合得很好,只是 tabview 表现得有点奇怪......
解决方法
我能够解决这些问题。基本上归结为停止 TabView 组件中 CreateDynamicComponentService 的递归 foreach 循环,在 TabView 中设置 tabs 变量并从服务重新启动递归函数:
create-dynamic-component.service
createComponent(content: any,type: any,vcRef) {
const componentRef = this.renderComp(content,type,vcRef)
if (content.nodes && content.nodes.length) {
if (!componentRef.instance.embeddedContainer) {
const cmpName = componentRef.instance.constructor.name;
if (cmpName != 'TabViewComponent') {
throw new TypeError('Trying to render embedded content. ${cmpName} must have @ViewChild() embeddedContainer defined');
}
} else {
content.nodes.forEach(type => {
const typeP = this.contentMappings[type.type];
this.createComponent(type,typeP,componentRef.instance.embeddedContainer);
});
}
}
}
TabViewComponent
@Component({
selector: 'dynamic-page-tab-view',template: '<p-tabView dynamic="true" cache="false">
<p-tabPanel [header]="tab.header" *ngFor="let tab of tabs; let i = index" [selected]="i == 0">
{{ tab.header }}
<ng-container #panel></ng-container>
</p-tabPanel>
</p-tabView>'
})
export class TabViewComponent implements AfterViewInit {
@ViewChild('container',{ read: ViewContainerRef,static: true })
embeddedContainer: ViewContainerRef;
@ViewChildren('panel',{read: ViewContainerRef}) tabPanels: QueryList<ViewContainerRef>
activeIndex: number;
tabs: any = []
constructor(private changeDetector : ChangeDetectorRef,private viewContainerRef: ViewContainerRef,private createDynamicComponentService: CreateDynamicComponentService,@Inject(CONTENT_MAPPINGS) private contentMappings: any) { }
contentOnCreate(values: { [key: string]: any; }): void {
this.tabs = values["nodes"];
this.activeIndex = 0;
}
ngAfterViewInit() {
this.tabPanels.forEach((viewRef: ViewContainerRef,index: number) => {
console.log(index,viewRef,this.tabs[index]);
const type = this.tabs[index];
const typeP = this.contentMappings[type.type];
this.createDynamicComponentService.createComponent(type,viewRef);
this.changeDetector.detectChanges();
});
}
}
重要的是,TabPanel 组件仅存在于单个容器中。
<ng-container #container></ng-container>
PrimeNg TabPanel 本身是在 TabView 组件中创建和模板化的
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。