angular使用动态组件后属性值_Angular动态加载组件
引言
有时候需要根据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;
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: `
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 略同,这里组件还需要进行注册:
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 编译模式。
angular使用动态组件后属性值_Angular动态加载组件相关推荐
- angular使用动态组件后属性值_Angular 2-组件
组件是Angular JS应用程序的逻辑代码.一个组件包括以下内容- 模板 -用于呈现应用程序的视图.它包含需要在应用程序中呈现的HTML.这部分还包括绑定和指令. 类 -这就像用C等任何语言定义的类 ...
- angular生命周期钩子ngOnChanges-父组件使子组件输入属性值变化时触发
触发条件: 父组件使子组件输入属性值变化时才会调用,子组件自己改变输入属性的值不会调用 @input属性(输入属性)发生变化时,会调用 当输入属性为对象时,当对象的属性值发生变化时,不会调用 当对象的 ...
- java 反射 设置属性_Java通过反射机制动态设置对象属性值的方法
/** * MethodName: getReflection * Description:解析respXML 在通过反射设置对象属性值 * User: liqijing * Date:2015-7- ...
- 踩坑记15 动态路由 router.options.routes未更新 | vue升级 element-plus未适配vue3.2.x | vite glob导入动态加载组件,不能使用别名alias
2021.8.12 坑50(vue-router4.addRoute().router.options.routes未更新):进行动态权限获取菜单的设置,使用了addRoute()来添加路由,但是ro ...
- Flex LineChart曲线——动态加载组件
最近在学习Flex 和Asp.net互操作,在网上查找了一些资料,综合后, 做出了这个动态加载组件的LineChart曲线.尚有不足之处请予以指正:谢谢. 下面是完整代码: 代码 1 <?xml ...
- 页面加载成功后调用_在微信小程序里实现图片预加载组件
网页中的图片预加载 我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是在 JS 中使用 Image 对象即可,代码大致如下 var image = new Image() image. ...
- React 中动态的加载组件 ---loadable-components
loadable-components 用于在react 中动态的加载组件 安装方法: npm i loadable-components 使用: 引入: 代码中使用: 希望对你有所帮助
- 关于vue 动态引入(异步加载import和require)组件的方法和坑(按需懒加载组件,动态生成路由)babel-plugin-dynamic-import-node 优化编译速度
前言: 最近在改造vue-cli 2.x + webpack2.x的项目时,由于之前路由是静态的,没有根据菜单权限动态生成前端路由.所以想对此进行改造,然后碰到了一些问题和坑,现在总结一下,避免以后继 ...
- vue.js 动态加载 html,Vue加载组件、动态加载组件的几种方式
什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HT ...
最新文章
- Handler消息机制(六):Looper.loop()为什么不会阻塞主线程?
- Github+Hexo搭建静态博客
- CodeVs——T 4919 线段树练习4
- 小米们要“造反”,开撕三大运营商
- 利用python获取nginx服务的ip以及流量统计信息
- Flutter进阶第11篇: 调用原生硬件Api实现扫码 扫描条形码 扫描二维码
- 714 买卖股票的最佳时机含手续费(状态机dp)
- (转置矩阵)将一个3x3、4x4矩阵转置后输出
- hacker 入门指南
- python实现QQ第三方登录
- Markov链:初始概率、绝对概率
- COMPUTEX直击:AMD公布多款新一代产品
- web网页设计期末课程大作业:水果网站设计——HTML+CSS+JavaScript水果超市(带论文)
- Eclipse中使用search功能,搜索内容无法多窗口打开
- import mysql.connector 报错
- BS架构说明以及网页组成
- kpw4换壁纸_kindle 篇五:kindle paperwhite4使用30天总结
- 这是一个关于女码农减肥的思考
- 工具 | 百度网盘限速解决方案
- 原来我们不懂百度seo排名和百度竞价