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