Angular 中的确认对话框 |
您所在的位置:网站首页 › angular弹窗弹出一张图 › 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 { }完成上述步骤后,就可以直接向组件添加一些代码了。 {{title}} {{message}} Cancel Save 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, @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() 事件来接收结果并使用数据绑定更改视图。 要启动对话,请向视图添加一个按钮和一个标签以显示响应。 Confirm 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; }); } } |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |