怎么在Angular中使用Dialog动态加载组件-创新互联
这篇文章将为大家详细讲解有关怎么在Angular中使用Dialog动态加载组件，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
动态加载组件的实现方式有两种，angular4.0版本之前使用ComponentFactoryResolver来实现，4.0之后可以使用更便捷的ngComponentOutlet来实现，
通过ComponentFactoryResolver实现动态载入
首先理一下ViewChild、ViewChildren、ElementRef、ViewContainerRef、ViewRef、ComponentRef、ComponentFactoryResolver之间的关系：
ViewChild 与 ViewChildren
ViewChild是通过模板引用变量（#）或者指令（directive）用来获取 Angular Dom 抽象类，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单元，ViewContainerRef api操作和获取的就是ViewRef
ComponentRef：宿主视图（组件实例视图）通过 ViewContainerRef 创建的对组件视图的引用，可以获取组件的信息并调用组件的方法
ComponentFactoryResolver
要获取 ComponentRef ，需要调用 ViewContainer 的 createComponent 方法，方法需要传入ComponentFactoryResolver创建的参数
constructor(
private componentFactoryResolver:ComponentFactoryResolver
) { }
viewInit(){
componentFactory =
this.componentFactoryResolver.resolveComponentFactory(DialogComponent);
// 获取对组件视图的引用，到这一步就已经完成了组件的动态加载
componentRef = this.customerRef.createComponent(componentFactory);
// 调用载入的组件的方法
componentRef.instance.dialogInit(component);
}具体实现
let componentFactory,componentRef;
@ViewChild('customerRef',{read: ViewContainerRef}) customerRef:ViewContainerRef;
constructor(
private componentFactoryResolver: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){
return rootNode;
}else {
rootNode = rootNodeViewContainerRef[0];
};
}
// 然后再根组件.ts内调用
this.fn.gerRootNode(this.viewcontainerRef);2、创建dialog.service.ts，定义open、close三个方法，使用ViewContainerRef创建dialog组件，创建之前需要调用 ComponentFactoryReslover，并将DialogComponent传入
let componentFactory;
let componentRef;
@Injectable()
export class DialogService {
constructor(
private componentFactoryResolver:ComponentFactoryResolver
private fn:FnService
) { }
open(component){
componentFactory =
this.componentFactoryResolver.resolveComponentFactory(DialogComponent);
// 这里的获取的是ComponentRef
containerRef = this.fn.gerRootNode().createComponent(componentFactory);
// 将containerRef存储下来，以便之后的销毁
containerRefArray.push(containerRef);
// 调用了组件内的初始化方法，后面会提到
return containerRef.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 在下面提到，这里为了偷懒，直接拿来用了）
let containerRef,dialogRef = new DialogRef();
export class DialogComponent implements OnInit {
componentName;
constructor(
private fn:FnService
) { }
dialogInit( _component, _containerRef){
this.componentName = _component;
containerRef = _containerRef;
dialogRef['containerRef'] = containerRef;
return dialogRef;
};
dialogDestory(){
let rootNode = this.fn.gerRootNode();
// 等待动画结束再移除
setTimeout(()=>{
// 这里用到了 viewContainerRef 里的indexOf 和 remove 方法
rootNode.remove(rootNode.indexOf(containerRef.hostView));
},400);
dialogRef.close();
return true;
};
}4、这里还创建了一个 DialogRef 的类，用来处理 dialog 关闭后的回调，这样就可以使用 XX.afterClose().subscribe() 来创建回调的方法了
@Injectable()
export class DialogRef{
public afterClose$ = new Subject();
constructor(){}
close(){
this.afterClose$.next();
this.afterClose$.complete();
}
afterClose(){
return this.afterClose$.asObservable();
}
}创建和销毁dialog
// 创建
let _viewRef = this.dialogService.open(DialogTestComponent);
_viewRef.afterClose().subscribe(()=>{
console.log('hi');
});
// 销毁
this.dialogService.close()关于怎么在Angular中使用Dialog动态加载组件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
本文名称：怎么在Angular中使用Dialog动态加载组件-创新互联
网站路径：http://cdiso.cn/article/dggcho.html
