Angular 中的確認對話方塊
確認對話方塊用於確認使用者將要執行的操作。如果使用者的輸入資料無效，它們還會顯示錯誤訊息。
本文教你如何使用 Angular Material 在 Angular 中建立一個確認彈窗。我們將建立一個新的通用元件，它可以從其他元件訪問。
在 Angular 中安裝並使用 Angular Material 元件建立確認對話方塊
基於 Web 的應用程式通常使用內建的 JavaScript 功能來顯示警報和對話。另一方面，普通的 JavaScript 對話方塊是現代的，這意味著螢幕上的所有內容都會停止，直到使用者回覆，並且無法在視覺上對其進行修改。
但是現在，情況發生了變化；在 Material 元件的幫助下，我們可以在 Angular 中快速設計一個動態確認彈出視窗。
首先，你需要藉助以下程式碼安裝 Angular Material。
npm install --save @angular/material @angular/cdk @angular/animations
現在，是時候在安裝 Angular Material 後匯入以下重要依賴項了。有關 Angular 材質的更多資訊，請單擊此處。
import { NgModule } from '@angular/core';
import {MatDialogModule } from '@angular/material/dialog' ;'@material/button';
@NgModule({
imports: [
MatDialogModule
],
exports: [
MatDialogModule
]
})
export class CustomMaterialModule { }
使用以下命令，建立一個名為 confirm-dialog 的新元件。
ng generate component confirm-dialog
對話元件將在資料夾中建立並新增到 app.module.ts 宣告陣列中。
值得注意的是 MatDialog 模組在執行時建立元件。因此，Angular 將需要我們提供更多資訊。
對於載入到對話方塊中的任何元件，元件類應該包含在我們的 NgModule 規範中的 entry components 陣列中。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CustomMaterialModule } from './custom-material/custom-material.module';
import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [
BrowserModule,
CustomMaterialModule,
BrowserAnimationsModule,
],
declarations: [AppComponent, ConfirmDialogComponent],
entryComponents: [ConfirmDialogComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
完成上述步驟後，就可以直接向元件新增一些程式碼了。
<h1 mat-dialog-title>
{{title}}
</h1>
<div mat-dialog-content>
<p>{{message}}</p>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onDelete()">Cancel</button>
<button mat-raised-button (click)="onCommand()">Save</button>
</div>
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Component, OnInit, Inject } from '@angular/core';
@Component({
selector: 'app-confirm-dialog',
templateUrl: './confirm-dialog.component.html',
styleUrls: ['./confirm-dialog.component.css']
})
export class ConfirmDialogComponent implements OnInit {
title: string;
message: string;
constructor(public dialogRef: MatDialogRef<ConfirmDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: ConfirmDialogModel) {
this.title = data.title;
this.message = data.message;
}
ngOnInit() {
}
onCommand(): void {
this.dialogRef.close(true);
}
onDelete(): void {
this.dialogRef.close(false);
}
}
export class ConfirmDialogModel {
constructor(public title: string, public message: string) {
}
}
構造方法做了兩件事：它連線到視窗並注入顯示在視窗上的訊息。兩者都由啟動彈出視窗的元件給出。
讓我們進入最後一步。最終，我們可以使用下面的程式碼來顯示我們的自定義確認對話方塊。
因為我們在內部使用了 MatDialog 元件，所以我們在建構函式中包含 MatDialog 依賴項，並在單擊按鈕時顯示確認對話方塊。我們可以通過監聽對話方塊的 afterClosed() 事件來接收結果並使用資料繫結更改檢視。
要啟動對話，請向檢視新增一個按鈕和一個標籤以顯示響應。
<button mat-raised-button (click)="confirmDialog()">Confirm</button>
import { Component } from '@angular/core';
import { ConfirmDialogModel, ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';
import { MatDialog } from '@angular/material/dialog';
@Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent {
result: string = '';
constructor(public dialog: MatDialog) {
}
confirmDialog(): void {
const message = `Do you want to save this file?`;
const dialogData = new ConfirmDialogModel("File Saving Message", message);
const dialogRef = this.dialog.open(ConfirmDialogComponent, {
maxWidth: "600px",
data: dialogData
});
dialogRef.afterClosed().subscribe(dialogResult => {
this.result = dialogResult;
});
}
}
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook