如何在TabView(PrimeNG)中延迟加载Angular 2组件？

发布时间：2020-12-17 07:54:05 所属栏目：安全来源：网络整理

导读：这是我的app.component.ts： import { Component } from '@angular/core';@Component({ templateUrl: 'app/app.component.html',selector: 'my-app'})export class AppComponent {} 这是我的app.component.html： p-tabView p-tabPanel header="Home" leftIc

这是我的app.component.ts：

import { Component } from '@angular/core';

@Component({
    templateUrl: 'app/app.component.html',selector: 'my-app'
})
export class AppComponent {

}

这是我的app.component.html：

<p-tabView>
    <p-tabPanel header="Home" leftIcon="fa-bar-chart-o">
        <home-app></home-app>
    </p-tabPanel>
    <p-tabPanel header="Hierarquia" leftIcon="fa-sitemap">
        <tree-app></tree-app>
    </p-tabPanel>
    <p-tabPanel header="Configura??es" leftIcon="fa-cog">
        <config-app></config-app>
    </p-tabPanel>
</p-tabView>

加载tabView时,我的三个组件(home,tree和config)已同时加载.但是,我希望在选择其选项卡时加载一个组件.怎么做？

P.S.：如果它有帮助,TabView有一个onChange事件.

您可以使用在angular2路由中使用的SystemJsNgModuleLoader

Live Plunker

首先,您可以编写将加载模块的组件：

@Component({
  selector: 'dynamic-container',template: `
    <template #container></template>
    <div *ngIf="!loaded" class="loader"></div>
  `,styles: [`
    .loader {
      position: relative;
      min-height: 100px;
    }

    .loader:after {
      content: 'Loading module. Please waiting...';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  `]
})
export class DynamicContainerComponent implements OnDestroy {
  @ViewChild('container',{ read: ViewContainerRef }) vcRef: ViewContainerRef;
  loaded: boolean;

  constructor(private moduleLoader: SystemJsNgModuleLoader) { }

  compRef: ComponentRef<any>;

  @Input() modulePath: string;
  @Input() moduleName: string;

  _inited: boolean
  set inited(val: boolean) {
    if(val) {
      this.loadComponent();
    }
    this._inited = val;
  };

  get inited() {
    return this._inited;
  }

  loadComponent() {
    this.moduleLoader.load(`${this.modulePath}#${this.moduleName}`)
      .then((moduleFactory: NgModuleFactory<any>) => {
        const vcRef = this.vcRef;
        const ngModuleRef = moduleFactory.create(vcRef.parentInjector);
        const comp = ngModuleRef.injector.get(LazyLoadConfig).component;
        const compFactory = ngModuleRef.componentFactoryResolver.resolveComponentFactory(comp);
        this.compRef = vcRef.createComponent(compFactory,ngModuleRef.injector);

        this.loaded = true;
      });
  }

  ngOnDestroy() {
    this.compRef.destroy();
  }
}

然后在您的组件中使用它：

@Component({
  selector: 'my-app',template: `
    <h2 class="plunker-title">How to lazy load Angular 2 components in a TabView (PrimeNG)?</h2>
    <p-tabView (onChange)="handleChange($event)">
    <p-tabPanel header="Home" leftIcon="fa-bar-chart-o">
        <home-app></home-app>
    </p-tabPanel>
    <p-tabPanel header="Hierarquia" leftIcon="fa-sitemap">
        <dynamic-container modulePath="./src/modules/tree/tree.module" moduleName="TreeModule"></dynamic-container>
    </p-tabPanel>
    <p-tabPanel header="Configura??es" leftIcon="fa-cog">
        <dynamic-container modulePath="./src/modules/config/config.module" moduleName="ConfigModule"></dynamic-container>
    </p-tabPanel>
</p-tabView>
  `
})
export class AppComponent {
  @ViewChildren(DynamicContainerComponent) dynamicContainers: QueryList<DynamicContainerComponent>;

  handleChange(e) {
    let dynamicContainer = this.dynamicContainers.toArray()[e.index - 1];
    if (!dynamicContainer || dynamicContainer.inited) return;

    // prevent fast clicking and double loading
    dynamicContainer.inited = true;
  }
}

也可以看看

> How to manually lazy load a module?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!