angular - 以角度动态加载嵌套组件？

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 提供的动态组件加载器来组织我的组件。

毕竟Tabs.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>

score 1 · Accepted Answer

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

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

关键是将复杂的内容延迟加载到一个<ng-template>with 中pTemplate="content"。

阅读TabView 文档以获取更多信息（向下滚动至Lazy Loading）。

angular - 以角度动态加载嵌套组件？

合同！！

1 回答 1

Related

Reference