费县建设局网站,做简报的网站,餐饮小店面装修设计,wordpress 双域名引言有时候需要根据URL来渲染不同组件#xff0c;我所指的是在同一个URL地址中根据参数的变化显示不同的组件#xff1b;这是利用Angular动态加载组件完成的#xff0c;同时也会设法让这部分动态组件也支持AOT。动态加载组件下面以一个Step组件为示例#xff0c;完成一个3个…引言有时候需要根据URL来渲染不同组件我所指的是在同一个URL地址中根据参数的变化显示不同的组件这是利用Angular动态加载组件完成的同时也会设法让这部分动态组件也支持AOT。动态加载组件下面以一个Step组件为示例完成一个3个步骤的示例展示并且可以通过URL user?stepstep-one 的变化显示第N个步骤的内容。1、resolveComponentFactory首先还是需要先创建动态加载组件模块。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();}}抛开一销毁动作不谈的话实际就两行代码let compFactory this.cfr.resolveComponentFactory(this.comp);利用 ComponentFactoryResolver 查找提供组件的 ComponentFactory而后利用这个工厂来创建实际的组件。this.compInstance this.vcr.createComponent(compFactory);这一切都非常简单。而对于一些基本的参数是直接对组件实例进行赋值。for (let key in data.inputs) {component.instance[key] data.inputs[key];}最后还需要告诉Angular AOT编译器为用户动态组件提供工厂注册否则 ComponentFactoryResolver 会找不到它们最简单就是利用 NgModule.entryComponents 进行注册。NgModule({entryComponents: [ UserOneComponent, UserTwoComponent, UserThirdComponent ]})export class AppModule { }但这样其实还是挺奇怪的entryComponents 本身可能还会存在其他组件。而动态加载组件本身是一个通用性非常强因此把它封装成名曰 StepModule 挺有必要的这样的话就可以创建一种看起来更舒服的方式。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。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: Step One Componentparams 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 略同这里组件还需要进行注册const STEPCOMPONENTS [ UserOneComponent, UserTwoComponent, UserThirdComponent ];NgModule({declarations: [ ...STEPCOMPONENTS ],imports: [StepModule.withComponents([ ...STEPCOMPONENTS ])]})export class AppModule { }这里没有 entryComponents 字眼而是为 StepModule 模块帮助我们动态注册。这样至少看起来更内聚一点而且并不会与其他 entryComponents 在一起待东西越多越不舒服。最后还需要 UserComponent 组件来维护步骤容器会根据 URL 参数的变化利用 StepComponent 组件动态加载相应组件。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 编译模式。
