本文轉自：https://www.jianshu.com/p/0c566fc1730d

環境：

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> 配置項描述

config.title	可配置，默認為“ 確定操作 ”。確定框的標題。
config.content	需配置。確定框的提示內容。
config.button	可配置，默認為“ 確定 ”。操作按鈕的文字。

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確定框的組件~

作者：LeeChingYin
鏈接：https://www.jianshu.com/p/0c566fc1730d
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權并注明出處。

?

轉載于:https://www.cnblogs.com/freeliver54/p/9741758.html

總結

以上是生活随笔為你收集整理的[转]Angular2 Material2 封装组件 —— confirmDialog确定框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。