typescript - Angular 2: Hvordan laste en komponent betinget i en rute asynkront?

Jeg vil gjerne legge til en komponent til en rute asynkront, gitt en betingelse.

Følgende eksempel, som fungerer (men er asynkront), laster en komponent eller en annen avhengig av brukerrollen:

import { UserDashboardComponent }  from './user-dashboard.component'
import { AdminDashboardComponent } from './admin-dashboard.component'

const role = 'admin' // Just for the example
const comp = role === 'admin' ? AdminDashboardComponent : UserDashboardComponent

const routes: Routes = [
  { path: '', component: comp },
]

Men, la oss si at vi vil hente rollen fra en API, altså asynkront. Hva er måten å få til det på?

Svar #1

Du kan opprette en generic.module.ts som vil ha begge komponentene i deklarasjons-arrayet:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UserDashboardComponent }  from './user-dashboard.component'
import { AdminDashboardComponent } from './admin-dashboard.component    

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ UserDashboardComponent,AdminDashboardComponent ]
})
export class GenericModule { }

på denne måten vil du ha en modul som inneholder modulene du ønsker å laste.

Neste steg vil nå være å laste dem asynkront ved hjelp av kompilatoren: inne i komponenten din gjør følgende:

import {GenericModule} from './generic.module';
import { Component, Input,ViewContainerRef, Compiler, NgModule,ModuleWithComponentFactories,OnInit,ViewChild} from '@angular/core';
@Component({
  selector: 'generic',
  template: '<div #target></div>'
})
export class App implements AfterViewInit {
  @ViewChild('target', {read: ViewContainerRef}) target: ViewContainerRef;

  constructor(private compiler: Compiler) {}

  ngAfterViewInit() {
    this.createComponent('<u>Example template...</u>');
  }

  private createComponent(template: string,role:string) {
    @Component({template: template});
    const mod = this.compiler.compileModuleAndAllComponentsSync(GenericModule);
    const factory = mod.componentFactories.find((comp) =>
    //you can add your comparison condition here to load the component
    //for eg. comp.selector===role where role='admin'
    );
    const component = this.target.createComponent(factory);
  }
}

Håper dette hjelper.

Svar #2

Angular 2 støtter treg lasting på modulnivå. Funksjonsmoduler lastes asynkront, ikke komponenter. Du kan gjøre den komponenten til en funksjonsmodul. https://angular.io/docs/ts/latest/guide/ngmodule.html

Relaterte artikler