環境：

Angular 4.0.0
Angular2 Material2 2.0.0-beta.3
node v7.4.0
npm 4.0.5

使用Dialog封裝confirmDialog確定框

源代碼

來，首先來看效果圖~

刪除例子

確定刪除框

點擊確定后返回值

1.定義通用確定框組件

confirmDialog.component.html

<div class="clearfix">
    <h1 class="pull-left" md-dialog-title>{{ config.title || '確認操作' }}</h1>
    <span class="icon-close-mid pull-right md-dialog-title-close" (click)="mdDialogRef.close(false)"></span>
</div>
<div md-dialog-content>{{ config.content }}</div>
<div md-dialog-actions class="confirm-dialog-operate">
    <button md-raised-button color="primary" (click)="mdDialogRef.close(true)">{{ config.button || '確定' }}</button>
    <button md-raised-button (click)="mdDialogRef.close(false)" class="confirm-dialog-cancel">取消</button>
</div>

confirmDialog.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { MdDialogRef } from '@angular/material';
import {MD_DIALOG_DATA} from '@angular/material';


@Component({
    selector: 'confirm-dialog',
    styleUrls: ['confirmDialog.component.scss'],
    templateUrl: 'confirmDialog.component.html'
})

export class ConfirmDialogComponent implements OnInit {
    config : {};
    
    constructor(private mdDialogRef : MdDialogRef<ConfirmDialogComponent>, @Inject(MD_DIALOG_DATA) data: any){
        this.config = data;
    }
    public ngOnInit() { }
}

confirmDialog.component.scss

.md-dialog-title-close:hover{
    cursor: pointer;
}
.confirm-dialog-operate{
    margin-bottom: 0;
    margin-top: 15px;
    align-items: center;
    justify-content: center;
}
.confirm-dialog-cancel{
    margin-left: 20px;
}

2.在app.module.ts引入組件

import { ConfirmDialogComponent } from './confirmDialog/confirmDialog.component';

@NgModule({
    declarations: [
        ···
        ConfirmDialogComponent,
        ···
    ],
    entryComponents: [
        ···
        ConfirmDialogComponent,
        ···
    ]
})
export class AppModule { }

3.把組件注入到服務

為了通用，把組件注入服務，方便在其他地方使用。這樣的話，就不用在每次使用的時候重新定義組件。

confirmDialog.service.ts

import { Component, Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';
import { MdDialog, MdDialogRef, MdDialogConfig } from '@angular/material';
import { ConfirmDialogComponent } from './confirmDialog.component';
import { Observable } from 'rxjs/Observable';

export class confirmDialogService {

    constructor( @Inject(MdDialog) public _confirmDialog: MdDialog, @Inject(DOCUMENT) doc: any) {
        // 打開dialog，body添加no-scroll樣式
        _confirmDialog.afterOpen.subscribe((ref: MdDialogRef<any>) => {
            if (!doc.body.classList.contains('no-scroll')) {
                doc.body.classList.add('no-scroll');
            }
        });
        // 關閉dialog，body移除no-scroll樣式
        _confirmDialog.afterAllClosed.subscribe(() => {
            doc.body.classList.remove('no-scroll');
        });
    }

    public confirm(contentOrConfig: any, title?: string): Observable<any> {
        // 設置dialog的屬性，寬度，高度，內容等。
        let config = new MdDialogConfig();
        config = {
            width: '300px',
            height: '200px'
        };
        if (contentOrConfig instanceof Object) {
            config.data = contentOrConfig;
        } else if ((typeof contentOrConfig) === 'string') {
            config.data = {
                content: contentOrConfig,
                title: title
            }
        }
        return this._confirmDialog.open(ConfirmDialogComponent, config).afterClosed();
    }
}

4.使用例子

在需要使用的組件里的provides注冊，就可以使用了，例子如下：

confirmDialog-example.component.ts

import { Component, OnInit, ViewEncapsulation, Inject } from '@angular/core';
import { confirmDialogService } from './confirmDialog.service';

@Component({
    selector: 'confirmDialog',
    templateUrl: 'confirmDialog-example.component.html',
    providers: [confirmDialogService]
})


export class DialogExampleComponent implements OnInit {
    lastCloseResult: any;

    public constructor(public _confirmDialogService: confirmDialogService) { }

    public confirm() {
        this._confirmDialogService.confirm({ content: '確認刪除嗎？' }).subscribe(res => {

            // 返回結果
            if (res) {
                this.lastCloseResult = "刪除成功";
            } else {
                return;
            }

        });
    }

    public ngOnInit() { }

}

confirmDialog-example.component.html

<p>Last close result: {{lastCloseResult}}</p>

<button md-raised-button (click)="confirm()">刪除</button>

確定刪除后，返回結果： this.lastCloseResult = "刪除成功"; 界面即顯示刪除成功，如上面的效果圖示。

就這樣完成了封裝confirmDialog確定框的組件~