详解angular2封装material2对话框组件

2019-09-09| 发布者: admin| 查看: |

1. 说明

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

2. 官方使用方法之alert

①编写alert内容组件

@component{

//必须声明两处
declarations: [ alertcomponent],
entrycomponents : [ alertcomponent]

//注入mddialog对象
constructor { }
this.mddialog.open

3. 官方使用方法之confirm


@component="mddialogref.close" 确认 /button 
 button md-button ="mddialogref.close" 取消 /button 
 /div `
export class confirmcomponent {
 constructor{ }

//必须声明两处
declarations: [ confirmcomponent],
entrycomponents : [ confirmcomponent]

//注入mddialog对象
constructor { }
this.mddialog.open.subscribe;

4. 分析

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

mddialog.open原型:



其中mddialogconfig:

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组件。怎么获取呢?

config : any;
constructor{
 this.config = mddialogref.config.data || {};

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

5. 定义通用化的组件

//alert.component.html
 div md-dialog-title {{config .title || '提示'}} /div 
 div md-dialog-content {{config .content || ''}} /div 
 div *ngif="!" md-dialog-actions 
 button md-button ="mddialogref.close" {{config .button || '确认'}} /button 
 /div