详解angular2封装material2对话框组件

1. 说明

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

2. 官方使用方法之alert

①编写alert内容组件

rush:js;"> @Component({ template : `

你好

` }) export class AlertComponent {

constructor(){
}
}

②在所属模块上声明

rush:js;"> //必须声明两处 declarations: [ AlertComponent],entryComponents : [ AlertComponent]

③使用MdDialg.open方法打开

rush:js;"> //注入mddialog对象 constructor(private mddialog : mddialog) { } //打开 this.mddialog.open(AlertComponent)

3. 官方使用方法之confirm

①编写confirm内容组件

rush:js;"> @Component({ template : `

'确认操作'

确认执行操作?

mddialogRef.close('ok')">确认 mddialogRef.close('cancel')">取消

` }) export class ConfirmComponent { constructor(private mddialogRef : mddialogRef){ } }

②在所属模块上声明

rush:js;"> //必须声明两处 declarations: [ ConfirmComponent],entryComponents : [ ConfirmComponent]

③使用mddialog.open打开并订阅相关事件

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

4. 分析

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

mddialog.open原型：

代码如下:

(componentOrTemplateRef: ComponentType | TemplateRef,config?: mddialogConfig): mddialogRef;

其中mddialogConfig：

rush:js;"> export declare class mddialogConfig { viewContainerRef?: ViewContainerRef; /** The ARIA role of the dialog element. */ role?: DialogRole; /** Whether the user can use escape or clicking outside to close a modal. */ disableClose?: boolean; /** Width of the dialog. */ width?: string; /** Height of the dialog. */ height?: string; /** Position overrides. */ position?: DialogPosition; /** Data being injected into the child component. */ data?: any; }

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

rush:js;"> config : any; constructor(private mddialogRef : mddialogRef){ this.config = mddialogRef.config.data || {}; }

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

5. 定义通用化的组件

rush:xhtml;"> //alert.component.html

{{config?.title || '提示'}}

{{config?.content || ''}}

mddialogRef.close()">{{config?.button || '确认'}}

rush:css;"> //alert.component.scss .title,.content{ text-align: center; } .actions{ display: flex; justify-content: center; }

rush:js;"> //alert.component.ts @Component({ selector: 'app-alert',templateUrl: './alert.component.html',styleUrls: ['./alert.component.scss'] }) export class AlertComponent {

config : {};

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

}

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

rush:js;"> constructor(private mddialog : mddialog) { }

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

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

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

6. 二次封装

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

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

rush:js;"> @Injectable() export class CustomDialogService {

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，它就可以被全局使用了。

用法：

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

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

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

原文地址：https://www.jb51.cc/js/41116.html