②在所屬模塊上聲明

//必須聲明兩處
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原型：

復(fù)制代碼 代碼如下:

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

其中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 || '提示'}}
{{config?.content || ''}}

 {{config?.button || '確認'}}

//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){
  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)

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

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

6. 二次封裝

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

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

@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 ?: 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(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等

以上是“angular2如何封裝material2對話框組件”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！