动态加载嵌套组件的角度？

Question

我想组织所有选项卡组件动态组件。 我在ui标签上使用primg ng。 目前我的代码是

• allTabs.component.html

之前

•  <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>

Answer 1

您可以像这样延迟加载选项卡内容：

<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 ）。