Динамически загружать вложенные компоненты в угловые? - PullRequest
Новая
       22

Динамически загружать вложенные компоненты в угловые?

0 голосов
/ 18 февраля 2019

Я хочу организовать все свои вкладки динамическими компонентами компонентов.Я использую 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>

1 Ответ

0 голосов
/ 18 февраля 2019

Вы можете лениво загружать содержимое вкладки следующим образом: 

<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> с помощью pTemplate="content".

Читать Документация TabView для получения дополнительной информации (прокрутите вниз до Lazy Loading).

...