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）用来获取 angular dom 抽象类，viewchild可以使用 elementref 或者 viewcontainerref 进行封装。

@viewchild('customerref') customerref:elementref;

viewchildren通过模板引用变量或者指令用来获取querylist，像是多个viewchild组成的数组。

@viewchildren(childdirective) viewchildren: querylist<childdirective>;

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建立动态组件存放节点

<ng-container *ngcomponentoutlet="componentname"></ng-container>

将组件（不是组件名称）传入，就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()

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。