频道导航

详解angular2封装material2对话框组件

2019-01-07 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了详解angular2封装material2对话框组件，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

1. 说明

@H_502_3@

angular-material2自身文档不详，控件不齐，使用上造成了很大的障碍。这里提供一个方案用于封装我们最常用的alert和confirm组件。@H_502_3@

2. 官方使用方法之alert

@H_502_3@

①编写alert内容组件@H_502_3@

你好@H_502_3@` }) export class AlertComponent {

constructor(){
}
}

②在所属模块上声明 @H_502_3@

③使用MdDialg.open方法打开 @H_502_3@

3. 官方使用方法之confirm

@H_502_3@

①编写confirm内容组件 @H_502_3@

'确认操作'

确认执行操作?

` }) export class ConfirmComponent { constructor(private mdDialogRef : MdDialogRef){ } }

②在所属模块上声明 @H_502_3@

③使用MdDialog.open打开并订阅相关事件 @H_502_3@

{ res === 'ok' && dosomething });

4. 分析

@H_502_3@

如2、3所示，使用material2的对话框组件相当繁琐，甚至仅仅打开一个不同的alert都要声明一个独立的组件，可用性很差。但也不是毫无办法。@H_502_3@

MdDialog.open原型：@H_502_3@

代码如下:

(componentOrTemplateRef: ComponentType | TemplateRef,config?: MdDialogConfig): MdDialogRef;

@H_502_3@

其中MdDialogConfig：@H_502_3@

具体每一个配置项有哪些用途可以参考官方文档，这里data字段，说明了将会被携带注入子组件，也即被open打开的component组件。怎么获取呢？@H_502_3@

){ this.config = mdDialogRef.config.data || {}; }

有了它我们就可以定义一个模板型的通用dialog组件了。@H_502_3@

5. 定义通用化的组件

@H_502_3@

config : {};

constructor(private mdDialogRef : MdDialogRef){
this.config = mdDialogRef.config.data || {};
}

}

我们将模板的一些可置换内容与config一些字段进行关联，那么我们可以这么使用：@H_502_3@

let config = new MdDialogConfig();
config.data = {
content : '你好'
}
this.mdDialog.open(AlertComponent,config)

依然繁琐，但至少我们解决了对话框组件复用的问题。@H_502_3@

我们可以声明一个新的模块，暂且起名为CustomeDialogModule，然后将component声明在此模块里，再将此模块声明到AppModule，这样可以避免AppModule的污染，保证我们的对话框组件独立可复用。@H_502_3@

6. 二次封装

@H_502_3@

如果仅仅是上面的封装，可用性依然很差，工具应当尽可能的方便，所以我们有必要再次进行封装@H_502_3@

首先在CustomDialogModule建一个服务，暂且起名为CustomDialogService@H_502_3@

constructor(private mdDialog : MdDialog) { }

//封装confirm，直接返回订阅对象
confirm(contentOrConfig : any,title ?: string) : Observable{
let config = new MdDialogConfig();
if(contentOrConfig instanceof Object){
config.data = contentOrConfig;
}else if((typeof contentOrConfig) === 'string'){
config.data = {
content : contentOrConfig,title : title
}
}
return this.mdDialog.open(DialogComponent,config).afterClosed();
}

//同
alert(contentOrConfig : any,title : title
}
}
return this.mdDialog.open(AlertComponent,config).afterClosed();
}

我们把它注册在CustomDialogModule里的provides，它就可以被全局使用了。@H_502_3@

用法：@H_502_3@

this.dialog.alert('你好');
this.dialog.alert('你好','标题');
this.dialog.alert({
content : '你好',title : '标题',button : 'ok'
});
this.dialog.confirm('确认吗').subscribe(res => {
res === 'ok' && dosomething
});

按照这种思路我们还可以封装更多组件，例如模态框，toast等 @H_502_3@

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

angular angular angularjs material2