Angular使用动态加载组件方法实现Dialog的示例
网上的文章和教程基本上写到组件加载完成就没了！没了？！而且都是只能存在一个dialog，想要打开另一个dialog必须先销毁当前打开的dialog，之后看过material的实现方式，怪自己太蠢看不懂源码，就只能用自己的方式来实现一个dialog组件了
Dialog组件的目标：可以同时存在多个Dialog，可销毁指定Dialog，销毁后html中无组件残留且提供回调
动态加载组件的实现方式有两种，angular4.0版本之前使用ComponentFactoryResolver来实现，4.0之后可以使用更便捷的ngComponentOutlet来实现，
通过ComponentFactoryResolver实现动态载入
首先理一下ViewChild、ViewChildren、ElementRef、ViewContainerRef、ViewRef、ComponentRef、ComponentFactoryResolver之间的关系：
ViewChild与ViewChildren
ViewChild是通过模板引用变量（#）或者指令（directive）用来获取AngularDom抽象类，ViewChild可以使用ElementRef或者ViewContainerRef进行封装。
@ViewChild('customerRef')customerRef:ElementRef;
ViewChildren通过模板引用变量或者指令用来获取QueryList，像是多个ViewChild组成的数组。
@ViewChildren(ChildDirective)viewChildren:QueryList;
ElementRef与ViewContainerRef
ViewChild可以使用ElementRef或者ViewContainerRef进行封装，那么ElementRef和ViewContainerRef的区别是什么？
用ElementRef进行封装，然后通过.nativeElement来获取原生Dom元素
console.log(this.customerRef.nativeElement.outerHTML);
ViewContainerRef：视图的容器，包含创建视图的方法和操作视图的api（组件与模板共同定义了视图）。api会返回ComponentRef与ViewRef，那么这两个又是什么？
//使用ViewContainetRef时，请使用read声明
@ViewChild('customerRef',{read:ViewContainerRef})customerRef:ViewContainerRef;
···
this.customerRef.createComponent(componentFactory)//componentFactory之后会提到
ViewRef与ComponentRef
ViewRef是最小的UI单元，ViewContainerRefapi操作和获取的就是ViewRef
ComponentRef：宿主视图（组件实例视图）通过ViewContainerRef创建的对组件视图的引用，可以获取组件的信息并调用组件的方法
ComponentFactoryResolver
要获取ComponentRef，需要调用ViewContainer的createComponent方法，方法需要传入ComponentFactoryResolver创建的参数
constructor(
privatecomponentFactoryResolver:ComponentFactoryResolver
){}
viewInit(){
componentFactory=
this.componentFactoryResolver.resolveComponentFactory(DialogComponent);
//获取对组件视图的引用，到这一步就已经完成了组件的动态加载
componentRef=this.customerRef.createComponent(componentFactory);
//调用载入的组件的方法
componentRef.instance.dialogInit(component);
}
具体实现
letcomponentFactory,componentRef;
@ViewChild('customerRef',{read:ViewContainerRef})customerRef:ViewContainerRef;
constructor(
privatecomponentFactoryResolver:ComponentFactoryResolver
){}
viewInit(){
//DialogComponent:你想要动态载入的组件，customerRef：动态组件存放的容器
componentFactory=
this.componentFactoryResolver.resolveComponentFactory(DialogComponent);
componentRef=this.customerRef.createComponent(componentFactory);
}
通过ngComponentOutlet实现动态载入
ngComponentOutlet大大缩减了代码量，但是只有带4.0之后的版本才支持
具体实现
在dialog.component.html建立动态组件存放节点
将组件（不是组件名称）传入，就OK了，为什么可以这么简单！
dialogInit(component){
this.componentName=component;
};
Dialog的实现
实现的思路是这样的：首先创建一个dialog组件用来承载其他组件，为dialog创建遮罩和动画，建立一个service来控制dialog的生成和销毁，不过service只生成dialog，dialog内的组件还是需要在dialog组件内进行生成
1、首先写一个公共的service，用来获取根组件的viewContainerRef（尝试过ApplicationRef获取根组件的viewContainerRef没成功，所以就写成service了）
gerRootNode(...rootNodeViewContainerRef){
if(rootNode){
returnrootNode;
}else{
rootNode=rootNodeViewContainerRef[0];
};
}
//然后再根组件.ts内调用
this.fn.gerRootNode(this.viewcontainerRef);
2、创建dialog.service.ts，定义open、close三个方法，使用ViewContainerRef创建dialog组件，创建之前需要调用ComponentFactoryReslover，并将DialogComponent传入
letcomponentFactory;
letcomponentRef;
@Injectable()
exportclassDialogService{
constructor(
privatecomponentFactoryResolver:ComponentFactoryResolver
privatefn:FnService
){}
open(component){
componentFactory=
this.componentFactoryResolver.resolveComponentFactory(DialogComponent);
//这里的获取的是ComponentRef
containerRef=this.fn.gerRootNode().createComponent(componentFactory);
//将containerRef存储下来，以便之后的销毁
containerRefArray.push(containerRef);
//调用了组件内的初始化方法，后面会提到
returncontainerRef.instance.dialogInit(component,containerRef);
}
//这里有两种情况，一种是在当前组件和dialog组件关闭调用的，因为有返回值所以可以关闭指定的dialog；还有一种是在插入到dialog组件内的组件调用的，因为不知道父组件的信息，所以默认关闭最后一个dialog
close(_containerRef=null){
if(_containerRef){
return_containerRef.containerRef.instance.dialogDestory();
}else{
containerRefArray.splice(-1,1)[0].instance.dialogDestory();
}
}
}
3、dialog.component.ts，这里使用ngComponentOutlet来实现（ngComponentOutlet在下面提到，这里为了偷懒，直接拿来用了）
letcontainerRef,dialogRef=newDialogRef();
exportclassDialogComponentimplementsOnInit{
componentName;
constructor(
privatefn:FnService
){}
dialogInit(_component,_containerRef){
this.componentName=_component;
containerRef=_containerRef;
dialogRef['containerRef']=containerRef;
returndialogRef;
};
dialogDestory(){
letrootNode=this.fn.gerRootNode();
//等待动画结束再移除
setTimeout(()=>{
//这里用到了viewContainerRef里的indexOf和remove方法
rootNode.remove(rootNode.indexOf(containerRef.hostView));
},400);
dialogRef.close();
returntrue;
};
}
4、这里还创建了一个DialogRef的类，用来处理dialog关闭后的回调，这样就可以使用XX.afterClose().subscribe()来创建回调的方法了
@Injectable()
exportclassDialogRef{
publicafterClose$=newSubject();
constructor(){}
close(){
this.afterClose$.next();
this.afterClose$.complete();
}
afterClose(){
returnthis.afterClose$.asObservable();
}
}
创建和销毁dialog
//创建
let_viewRef=this.dialogService.open(DialogTestComponent);
_viewRef.afterClose().subscribe(()=>{
console.log('hi');
});
//销毁
this.dialogService.close()
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。