详解angular2封装material2对话框组件
1.说明
angular-material2自身文档不详，控件不齐，使用上造成了很大的障碍。这里提供一个方案用于封装我们最常用的alert和confirm组件。
2.官方使用方法之alert
①编写alert内容组件
@Component({
template:`你好
`
})
exportclassAlertComponent{
constructor(){
}
}
②在所属模块上声明
//必须声明两处
declarations:[AlertComponent],
entryComponents:[AlertComponent]
③使用MdDialg.open方法打开
//注入MdDialog对象
constructor(privatemdDialog:MdDialog){}
//打开
this.mdDialog.open(AlertComponent)
3.官方使用方法之confirm
①编写confirm内容组件
@Component({
template:`'确认操作'
确认执行操作?
确认
取消
`
})
exportclassConfirmComponent{
constructor(privatemdDialogRef:MdDialogRef
){}
}
②在所属模块上声明
//必须声明两处
declarations:[ConfirmComponent],
entryComponents:[ConfirmComponent]
③使用MdDialog.open打开并订阅相关事件
//注入MdDialog对象
constructor(privatemdDialog:MdDialog){}
//打开
this.mdDialog.open(ConfirmComponent).subscribe(res=>{
res==='ok'&&dosomething
});
4.分析
如2、3所示，使用material2的对话框组件相当繁琐，甚至仅仅打开一个不同的alert都要声明一个独立的组件，可用性很差。但也不是毫无办法。
MdDialog.open原型：
open(componentOrTemplateRef:ComponentType|TemplateRef,config?:MdDialogConfig):MdDialogRef;
其中MdDialogConfig：
exportdeclareclassMdDialogConfig{
viewContainerRef?:ViewContainerRef;
/**TheARIAroleofthedialogelement.*/
role?:DialogRole;
/**Whethertheusercanuseescapeorclickingoutsidetocloseamodal.*/
disableClose?:boolean;
/**Widthofthedialog.*/
width?:string;
/**Heightofthedialog.*/
height?:string;
/**Positionoverrides.*/
position?:DialogPosition;
/**Databeinginjectedintothechildcomponent.*/
data?:any;
}
具体每一个配置项有哪些用途可以参考官方文档，这里data字段，说明了将会被携带注入子组件，也即被open打开的component组件。怎么获取呢？
config:any;
constructor(privatemdDialogRef:MdDialogRef){
this.config=mdDialogRef.config.data||{};
}
有了它我们就可以定义一个模板型的通用dialog组件了。
5.定义通用化的组件
//alert.component.html
{{config?.title||'提示'}}
