詳解angular2封裝material2對話框組件

更新時間：2017年03月03日 10:55:36 作者：沐心chen

本篇文章主要介紹了詳解angular2封裝material2對話框組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

1. 說明

angular-material2自身文檔不詳，控件不齊，使用上造成了很大的障礙。這里提供一個方案用于封裝我們最常用的alert和confirm組件。

2. 官方使用方法之a(chǎn)lert

①編寫alert內(nèi)容組件

@Component({
template : `<p>你好</p>`
})
export class AlertComponent {

 constructor(){
 }
}

②在所屬模塊上聲明

//必須聲明兩處
declarations: [ AlertComponent],
entryComponents : [ AlertComponent]

③使用MdDialg.open方法打開

//注入MdDialog對象
constructor(private mdDialog : MdDialog) { }
//打開
this.mdDialog.open(AlertComponent)

3. 官方使用方法之confirm

①編寫confirm內(nèi)容組件

@Component({
template : `<div md-dialog-title>'確認操作'</div>
      <div md-dialog-content>確認執(zhí)行操作?</div>
      <div md-dialog-actions>
       <button md-button (click)="mdDialogRef.close('ok')">確認</button>
       <button md-button (click)="mdDialogRef.close('cancel')">取消</button>
      </div>`
})
export class ConfirmComponent {
 constructor(private mdDialogRef : MdDialogRef<DialogComponent>){ }
}

②在所屬模塊上聲明

//必須聲明兩處
declarations: [ ConfirmComponent],
entryComponents : [ ConfirmComponent]

③使用MdDialog.open打開并訂閱相關(guān)事件

//注入MdDialog對象
constructor(private mdDialog : MdDialog) { }
//打開
this.mdDialog.open(ConfirmComponent).subscribe(res => {
 res === 'ok' && dosomething
});

4. 分析

如2、3所示，使用material2的對話框組件相當繁瑣，甚至僅僅打開一個不同的alert都要聲明一個獨立的組件，可用性很差。但也不是毫無辦法。

MdDialog.open原型：

復制代碼代碼如下:

open<T>(componentOrTemplateRef: ComponentType<T> | TemplateRef<T>, config?: MdDialogConfig): MdDialogRef<T>;

其中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<AlertComponent>){
  this.config = mdDialogRef.config.data || {};
}

有了它我們就可以定義一個模板型的通用dialog組件了。

5. 定義通用化的組件

//alert.component.html
<div class="title" md-dialog-title>{{config?.title || '提示'}}</div>
<div class="content" md-dialog-content>{{config?.content || ''}}</div>
<div class="actions" *ngIf="!(config?.hiddenButton)" md-dialog-actions>
 <button md-button (click)="mdDialogRef.close()">{{config?.button || '確認'}}</button>
</div>

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

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

 config : {};

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

}

我們將模板的一些可置換內(nèi)容與config一些字段進行關(guān)聯(lián)，那么我們可以這么使用：

constructor(private mdDialog : MdDialog) { }

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

依然繁瑣，但至少我們解決了對話框組件復用的問題。

我們可以聲明一個新的模塊，暫且起名為CustomeDialogModule，然后將component聲明在此模塊里，再將此模塊聲明到AppModule，這樣可以避免AppModule的污染，保證我們的對話框組件獨立可復用。

6. 二次封裝

如果僅僅是上面的封裝，可用性依然很差，工具應當盡可能的方便，所以我們有必要再次進行封裝

首先在CustomDialogModule建一個服務，暫且起名為CustomDialogService

@Injectable()
export class CustomDialogService {

 constructor(private mdDialog : MdDialog) { }

 //封裝confirm，直接返回訂閱對象
 confirm(contentOrConfig : any, title ?: string) : Observable<any>{
  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 ?: string) : Observable<any>{
  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(AlertComponent, config).afterClosed();
 }

我們把它注冊在CustomDialogModule里的provides，它就可以被全局使用了。

用法：

constructor(dialog : CustomDialogService){}

this.dialog.alert('你好');
this.dialog.alert('你好','標題');
this.dialog.alert({
  content : '你好',
  title : '標題',
  button : 'ok'
});
this.dialog.confirm('確認嗎').subscribe(res => {
  res === 'ok' && dosomething
});

按照這種思路我們還可以封裝更多組件，例如模態(tài)框，toast等

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: