前言
有時候需要根據(jù)URL來渲染不同組件，我所指的是在同一個URL地址中根據(jù)參數(shù)的變化顯示不同的組件；這是利用Angular動態(tài)加載組件完成的，同時也會設(shè)法讓這部分動態(tài)組件也支持AOT。
動態(tài)加載組件
下面以一個Step組件為示例，完成一個3個步驟的示例展示，并且可以通過URL user?step=step-one 的變化顯示第N個步驟的內(nèi)容。
1、resolveComponentFactory
首先，還是需要先創(chuàng)建動態(tài)加載組件模塊。
import { Component, Input, ViewContainerRef, ComponentFactoryResolver, OnDestroy, ComponentRef } from '@angular/core';@Component({ selector: 'step', template: ``})export class Step implements OnDestroy { private currentComponent: ComponentRef<any>; constructor(private vcr: ViewContainerRef, private cfr: ComponentFactoryResolver) {} @Input() set data(data: { component: any, inputs?: { [key: string]: any } } ) { const compFactory = this.cfr.resolveComponentFactory(data.component); const component = this.vcr.createComponent(compFactory); if (data.inputs) { for (let key in data.inputs) { component.instance[key] = data.inputs[key]; } } this.destroy(); this.currentComponent = component; } destroy() { if (this.currentComponent) { this.currentComponent.destroy(); this.currentComponent = null; } } ngOnDestroy(): void { this.destroy(); }}拋開一銷毀動作不談的話，實際就兩行代碼：
let compFactory = this.cfr.resolveComponentFactory(this.comp);
利用 ComponentFactoryResolver 查找提供組件的 ComponentFactory，而后利用這個工廠來創(chuàng)建實際的組件。
this.compInstance = this.vcr.createComponent(compFactory);
這一切都非常簡單。
而對于一些基本的參數(shù)，是直接對組件實例進(jìn)行賦值。
for (let key in data.inputs) { component.instance[key] = data.inputs[key]; }最后，還需要告訴Angular AOT編譯器為用戶動態(tài)組件提供工廠注冊，否則 ComponentFactoryResolver 會找不到它們，最簡單就是利用 NgModule.entryComponents 進(jìn)行注冊。
@NgModule({ entryComponents: [ UserOneComponent, UserTwoComponent, UserThirdComponent ]})export class AppModule { }但這樣其實還是挺奇怪的，entryComponents 本身可能還會存在其他組件。而動態(tài)加載組件本身是一個通用性非常強，因此，把它封裝成名曰 StepModule 挺有必要的，這樣的話，就可以創(chuàng)建一種看起來更舒服的方式。
@NgModule({ declarations: [ Step ], exports: [ Step ]})export class StepModule { static withComponents(components: any) { return { ngModule: StepModule, providers: [ { provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: components, multi: true } ] } }}通過利用 ANALYZE_FOR_ENTRY_COMPONENTS 將多個組件以更友好的方式動態(tài)注冊至 entryComponents。
const COMPONENTS = [ ];@NgModule({ declarations: [ ...COMPONENTS ], imports: [ StepModule.withComponents([ ...COMPONENTS ]) ]})export class AppModule { }2、一個示例
有3個Step步驟的組件，分別為：
// user-one.component.tsimport { Component, OnDestroy, Input, Injector, EventEmitter, Output } from '@angular/core';@Component({ selector: 'step-one', template: `<h2>Step One Component：params value: {{step}}</h2>`})export class UserOneComponent implements OnDestroy { private _step: string; @Input() set step(str: string) { console.log('@Input step: ' + str); this._step = str; } get step() { return this._step; } ngOnInit() { console.log('step one init'); } ngOnDestroy(): void { console.log('step one destroy'); }}user-two、user-third 略同，這里組件還需要進(jìn)行注冊：
const STEPCOMPONENTS = [ UserOneComponent, UserTwoComponent, UserThirdComponent ];@NgModule({ declarations: [ ...STEPCOMPONENTS ], imports: [ StepModule.withComponents([ ...STEPCOMPONENTS ]) ]})export class AppModule { }這里沒有 entryComponents 字眼，而是為 StepModule 模塊幫助我們動態(tài)注冊。這樣至少看起來更內(nèi)聚一點，而且并不會與其他 entryComponents 在一起，待東西越多越不舒服。
最后，還需要 UserComponent 組件來維護(hù)步驟容器，會根據(jù) URL 參數(shù)的變化，利用 StepComponent 組件動態(tài)加載相應(yīng)組件。
@Component({ selector: 'user', template: `<step [comp]="stepComp"></step>`})export class UserComponent { constructor(private route: ActivatedRoute) {} stepComp: any; ngOnInit() { this.route.queryParams.subscribe(params => { const step = params['step'] || 'step-one'; // 組件與參數(shù)對應(yīng)表 const compMaps = { 'step-one': { component: UserOneComponent, inputs: { step: step } }, 'step-two': { component: UserTwoComponent }, 'step-third': { component: UserThirdComponent }, }; this.stepComp = compMaps[step]; }); }}非常簡單的使用，而且又對AOT比較友好。
總結(jié)
文章里面一直都在提AOT，其實AOT是Angular為了提供速度與包大小而生的，按我們項目的經(jīng)驗來看至少在包的大小可以減少到 40% 以上。
當(dāng)然，如果你是用angular cli開發(fā)，那么，當(dāng)你進(jìn)行 ng build --prod 的時候，默認(rèn)就已經(jīng)開啟 AOT 編譯模式。
好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家武林網(wǎng)的支持。
新聞熱點
疑難解答
