欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-22 20:51:44
前言 有时候需要根据url来渲染不同组件,我所指的是在同一个url地址中根据参数的变化显示不同的组件;这是利用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<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 编译模式。

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