Angular.js实现动态加载组件详解

前言

有时候需要根据URL来渲染不同组件，我所指的是在同一个URL地址中根据参数的变化显示不同的组件；这是利用Angular动态加载组件完成的，同时也会设法让这部分动态组件也支持AOT。

动态加载组件

下面以一个Step组件为示例，完成一个3个步骤的示例展示，并且可以通过URL user?step=step-one 的变化显示第N个步骤的内容。

1、resolveComponentFactory

首先，还是需要先创建动态加载组件模块。

rush:js;"> import { Component,Input,ViewContainerRef,ComponentFactoryResolver,OnDestroy,ComponentRef } from '@angular/core'; @Component({ selector: 'step',template: `` }) export class Step implements OnDestroy { private currentComponent: ComponentRef;

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();
}

}

抛开一销毁动作不谈的话，实际就两行代码：

rush:js;"> let compFactory = this.cfr.resolveComponentFactory(this.comp);

利用 ComponentFactoryResolver 查找提供组件的 ComponentFactory，而后利用这个工厂来创建实际的组件。

rush:js;"> this.compInstance = this.vcr.createComponent(compFactory);

这一切都非常简单。

而对于一些基本的参数，是直接对组件实例进行赋值。

rush:js;"> for (let key in data.inputs) { component.instance[key] = data.inputs[key]; }

最后，还需要告诉Angular AOT编译器为用户动态组件提供工厂注册，否则 ComponentFactoryResolver 会找不到它们，最简单就是利用 NgModule.entryComponents 进行注册。

rush:js;"> @NgModule({ entryComponents: [ UserOneComponent,UserTwoComponent,UserThirdComponent ] }) export class AppModule { }

但这样其实还是挺奇怪的，entryComponents 本身可能还会存在其他组件。而动态加载组件本身是一个通用性非常强，因此，把它封装成名曰 StepModule 挺有必要的，这样的话，就可以创建一种看起来更舒服的方式。

rush:js;"> @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 将多个组件以更友好的方式动态注册至 entryComponents。

rush:js;"> const COMPONENTS = [ ];

@NgModule({
declarations: [ ...COMPONENTS ],imports: [
StepModule.withComponents([ ...COMPONENTS ])
]
})
export class AppModule { }

2、一个示例

有3个Step步骤的组件，分别为：

rush:js;"> // user-one.component.ts import { Component,Injector,EventEmitter,Output } from '@angular/core'; @Component({ selector: 'step-one',template: `

Step One Component：params value: {{step}}

` }) 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 略同，这里组件还需要进行注册：

rush:js;"> const STEPCOMPONENTS = [ UserOneComponent,UserThirdComponent ];

@NgModule({
declarations: [ ...STEPCOMPONENTS ],imports: [
StepModule.withComponents([ ...STEPCOMPONENTS ])
]
})
export class AppModule { }

这里没有 entryComponents 字眼，而是为 StepModule 模块帮助我们动态注册。这样至少看起来更内聚一点，而且并不会与其他 entryComponents 在一起，待东西越多越不舒服。

最后，还需要 UserComponent 组件来维护步骤容器，会根据 URL 参数的变化，利用 StepComponent 组件动态加载相应组件。

rush:js;"> @Component({ selector: 'user',template: `` }) export class UserComponent { constructor(private route: ActivatedRoute) {} stepComp: any; ngOnInit() { this.route.queryParams.subscribe(params => { const step = params['step'] || 'step-one'; // 组件与参数对应表 const compMaps = { 'step-one': { component: UserOneComponent,inputs: { step: step } },'step-two': { component: UserTwoComponent },'step-third': { component: UserThirdComponent },}; this.stepComp = compMaps[step]; }); } }

非常简单的使用，而且又对AOT比较友好。

总结

文章里面一直都在提AOT，其实AOT是Angular为了提供速度与包大小而生的，按我们项目的经验来看至少在包的大小可以减少到 40% 以上。

当然，如果你是用angular cli开发，那么，当你进行 ng build --prod 的时候，默认就已经开启 AOT 编译模式。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家编程之家的支持。