Angular.js实现动态加载组件详解
前言
有时候需要根据URL来渲染不同组件,我所指的是在同一个URL地址中根据参数的变化显示不同的组件;这是利用Angular动态加载组件完成的,同时也会设法让这部分动态组件也支持AOT。
动态加载组件
下面以一个Step组件为示例,完成一个3个步骤的示例展示,并且可以通过URL user?step=step-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<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,而后利用这个工厂来创建实际的组件。
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.ts import { 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 略同,这里组件还需要进行注册:
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: `<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开发,那么,当你进行 ng build --prod
的时候,默认就已经开启 AOT 编译模式。
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家脚本之家的支持。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP安全我见
- 使用Android WebSocket实现即时通讯功能
- 虚拟机设置桥接上网(下)
- WebSth 指纹识别插件简要分析
- Android实现3D层叠式卡片图片展示
- Android Studio屏幕方向以及UI界面状态的保存代码详解
- webshell,禁止你执行
- android实现下拉菜单三级联动
- Flutter 假异步的实现示例
- 详解Android4.4 RIL短信接收流程分析
- android 使用kotlin 实现点击更换全局语言(中日英切换)
- EasySec基于XP的渗透平台
- Android集成腾讯X5实现文档浏览功能
- 8个小时8个小时的上机课!!
- Android实现根据评分添加星级条