Angular动态加载组件
引言有时候需要根据URL来渲染不同组件,我所指的是在同一个URL地址中根据参数的变化显示不同的组件;这是利用Angular动态加载组件完成的,同时也会设法让这部分动态组件也支持AOT。 动态加载组件下面以一个Step组件为示例,完成一个3个步骤的示例展示,并且可以通过URL 1、resolveComponentFactory首先,还是需要先创建动态加载组件模块。 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); 利用 this.compInstance = this.vcr.createComponent(compFactory); 这一切都非常简单。 而对于一些基本的参数,是直接对组件实例进行赋值。 for (let key in data.inputs) { component.instance[key] = data.inputs[key]; } 最后,还需要告诉Angular AOT编译器为用户动态组件提供工厂注册,否则 @NgModule({ entryComponents: [ UserOneComponent,UserTwoComponent,UserThirdComponent ] }) export class AppModule { } 但这样其实还是挺奇怪的, @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 } ] } } } 通过利用 const COMPONENTS = [ ]; @NgModule({ declarations: [ ...COMPONENTS ],imports: [ StepModule.withComponents([ ...COMPONENTS ]) ] }) export class AppModule { } 2、一个示例有3个Step步骤的组件,分别为: // user-one.component.ts import { Component,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 略同,这里组件还需要进行注册: const STEPCOMPONENTS = [ UserOneComponent,UserThirdComponent ]; @NgModule({ declarations: [ ...STEPCOMPONENTS ],imports: [ StepModule.withComponents([ ...STEPCOMPONENTS ]) ] }) export class AppModule { } 这里没有 最后,还需要 @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'; // 组件与参数对应表 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开发,那么,当你进行 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |