Angular.js怎么实现动态加载组件-创新互联
小编给大家分享一下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;
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比较友好。
以上是“Angular.js怎么实现动态加载组件”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联网站建设公司行业资讯频道！
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
当前名称：Angular.js怎么实现动态加载组件-创新互联
本文来源：http://azwzsj.com/article/doieie.html
