angular2如何封裝material2對(duì)話框組件

這篇文章主要介紹angular2如何封裝material2對(duì)話框組件，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

1. 說明

angular-material2自身文檔不詳，控件不齊，使用上造成了很大的障礙。這里提供一個(gè)方案用于封裝我們最常用的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對(duì)象
constructor(private mdDialog : MdDialog) { }
//打開
this.mdDialog.open(AlertComponent)

3. 官方使用方法之confirm

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

@Component({
template : `<div md-dialog-title>'確認(rèn)操作'</div>
      <div md-dialog-content>確認(rèn)執(zhí)行操作?</div>
      <div md-dialog-actions>
       <button md-button (click)="mdDialogRef.close('ok')">確認(rèn)</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對(duì)象
constructor(private mdDialog : MdDialog) { }
//打開
this.mdDialog.open(ConfirmComponent).subscribe(res => {
 res === 'ok' && dosomething
});

4. 分析

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

MdDialog.open原型：

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

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;
}

具體每一個(gè)配置項(xiàng)有哪些用途可以參考官方文檔，這里data字段，說明了將會(huì)被攜帶注入子組件，也即被open打開的component組件。怎么獲取呢？

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

有了它我們就可以定義一個(gè)模板型的通用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 || '確認(rèn)'}}</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一些字段進(jìn)行關(guān)聯(lián)，那么我們可以這么使用：

constructor(private mdDialog : MdDialog) { }

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

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

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

6. 二次封裝

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

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

@Injectable()
export class CustomDialogService {

 constructor(private mdDialog : MdDialog) { }

 //封裝confirm，直接返回訂閱對(duì)象
 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();
 }

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

用法：

constructor(dialog : CustomDialogService){}

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

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

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