[英]Dynamically load nested components in angular?
我想組織所有選項卡組件動態組件。 我在ui標簽上使用primg ng。 目前我的代碼是
之前
<p-tabPanel header="Contracts"> <app-a [arrId]='parrangementId' *ngIf="tabIndex==1"></app-a> </p-tabPanel> <p-tabPanel header="Allocations"> <app-b [arrId]='parrangementId' *ngIf="tabIndex==2"></app-b> </p-tabPanel> </p-tabView>
此處每個選項卡都包含每個組件。 當此路由加載時,所有組件都已初始化,因此我想使用動態組件加載來減少加載時間。 因此,后來我嘗試使用anhular提供的動態組件加載器來組織我的組件。
畢竟allTabs.component.html看起來像
<p-tabPanel header="Contracts"> <ng-template ad-cm></ng-template> </p-tabPanel> <p-tabPanel header="Allocations"> </p-tabPanel>
allTabs.component.ts
@Component({ templateUrl: './rmanArrangementsOverView.component.html', selector: 'rmanArrangementsOverView-data' entryComponents: [AllocationComponent, ContractsComponent] }) export class ALLCom { @ViewChild(AdCmDirective) adCm: AdCmDirective; ref:ComponentRef<any>; private loadedComponentsArray = [ { 'componentIndex': 1, 'componentName': ContractsComponent }, { 'componentIndex': 2, 'componentName': AllocationComponent }, { 'componentIndex': 3, 'componentName': RmanContTransToReleaseComponent }, { 'componentIndex': 4, 'componentName': RmanOrderBookingsVComponent }, { 'componentIndex': 5, 'componentName': RmanInvoiceHeadersVComponent } ] constructor(private componentFactoryResolver: ComponentFactoryResolver){ } ngOnInit() { } loadComponent(component) { let componentFactory = this.componentFactoryResolver.resolveComponentFactory(component); let viewContainerRef = this.adCm.viewContainerRef; viewContainerRef.clear(); let componentRef = viewContainerRef.createComponent(componentFactory); this.ref=componentRef; } removeComponent(){ try{ this.ref.destroy(); } catch(e){ } } handleChange(event: any) { console.log(event); var index = event.index; console.log('event tab index : ' + index); this.tabIndex = index; let component = this.loadedComponentsArray.find(c=> { if(c.componentIndex == this.tabIndex) return true }); console.log(component, 'component'); this.removeComponent(); this.loadComponent(component.componentName); }
a.component.html
<div>
test
<app-a [arrId]='parrangementId'></app-a>
b.componet.html
<div>Allocation</div>
<app-b [arrId]='parrangementId'>
</app-b>
即使我有子組件在中,組件
例如:AppAComponent.htnml(
<app-a-child [asle]="ddata"></app-a-child>
您可以像這樣延遲加載選項卡內容:
<p-tabView>
<p-tabPanel header="Contracts">
<ng-template pTemplate="content">
<app-a [arrId]='parrangementId'></app-a>
</ng-template>
</p-tabPanel>
<p-tabPanel header="Allocations">
<ng-template pTemplate="content">
<app-b [arrId]='parrangementId'></app-b>
</ng-template>
</p-tabPanel>
</p-tabView>
關鍵是使用pTemplate="content"
將復雜的內容延遲加載到<ng-template>
。
閱讀TabView文檔以獲取更多信息(向下滾動至Lazy Loading
)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.