Angular 中的確認對話方塊

Muhammad Adil 2022年4月20日
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 avatar Muhammad Adil avatar

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