合同!!

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>

关键是将复杂内容放入带有<ng-template>的{{1}}内的延迟加载。

阅读TabView documentation了解更多信息（向下滚动至pTemplate="content"）。

动态加载嵌套组件成角形吗？

合同!!

1 个答案: