angular2如何封装material2对话框组件
这篇文章主要介绍angular2如何封装material2对话框组件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
成都网站建设哪家好,找成都创新互联!专注于网页设计、重庆网站建设公司、微信开发、小程序开发、集团成都定制网页设计等服务项目。核心团队均拥有互联网行业多年经验,服务众多知名企业客户;涵盖的客户类型包括:湿喷机等众多领域,积累了大量丰富的经验,同时也获得了客户的一致称赞!
1. 说明
angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍。这里提供一个方案用于封装我们最常用的alert和confirm组件。
2. 官方使用方法之alert
①编写alert内容组件
@Component({ template : `你好
` }) export class AlertComponent { constructor(){ } }
②在所属模块上声明
//必须声明两处 declarations: [ AlertComponent], entryComponents : [ AlertComponent]
③使用MdDialg.open方法打开
//注入MdDialog对象 constructor(private mdDialog : MdDialog) { } //打开 this.mdDialog.open(AlertComponent)
3. 官方使用方法之confirm
①编写confirm内容组件
@Component({ template : `'确认操作'
②在所属模块上声明
//必须声明两处 declarations: [ ConfirmComponent], entryComponents : [ ConfirmComponent]
③使用MdDialog.open打开并订阅相关事件
//注入MdDialog对象 constructor(private mdDialog : MdDialog) { } //打开 this.mdDialog.open(ConfirmComponent).subscribe(res => { res === 'ok' && dosomething });
4. 分析
如2、3所示,使用material2的对话框组件相当繁琐,甚至仅仅打开一个不同的alert都要声明一个独立的组件,可用性很差。但也不是毫无办法。
MdDialog.open原型:
复制代码 代码如下:
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(private mdDialogRef : MdDialogRef){ this.config = mdDialogRef.config.data || {}; }
有了它我们就可以定义一个模板型的通用dialog组件了。
5. 定义通用化的组件
//alert.component.html{{config?.title || '提示'}}