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

成都網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、重慶網(wǎng)站建設(shè)公司、微信開發(fā)、小程序開發(fā)、集團(tuán)成都定制網(wǎng)頁設(shè)計等服務(wù)項目。核心團(tuán)隊均擁有互聯(lián)網(wǎng)行業(yè)多年經(jīng)驗，服務(wù)眾多知名企業(yè)客戶；涵蓋的客戶類型包括：濕噴機(jī)等眾多領(lǐng)域，積累了大量豐富的經(jīng)驗，同時也獲得了客戶的一致稱贊！

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>'確認(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對象
constructor(private mdDialog : MdDialog) { }
//打開
this.mdDialog.open(ConfirmComponent).subscribe(res => {
 res === 'ok' && dosomething
});

4. 分析

如2、3所示，使用material2的對話框組件相當(dāng)繁瑣，甚至僅僅打開一個不同的alert都要聲明一個獨(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;
}

具體每一個配置項有哪些用途可以參考官方文檔，這里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 || '確認(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)

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

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

6. 二次封裝

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

首先在CustomDialogModule建一個服務(wù)，暫且起名為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('你好','標(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對話框組件”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：angular2如何封裝material2對話框組件
標(biāo)題網(wǎng)址：http://www.rwnh.cn/article14/jsdpde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、虛擬主機(jī)、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站建設(shè)、微信小程序、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)