Bestätigungsdialog in Angular
Bestätigungsdialogfelder werden verwendet, um Aktionen zu bestätigen, die der Benutzer ausführen wird. Sie zeigen auch eine Fehlermeldung an, wenn der Benutzer ungültige Eingabedaten hat.
In diesem Artikel erfahren Sie, wie Sie Angular Material verwenden, um ein Bestätigungs-Popup in Angular zu erstellen. Wir erstellen eine neue gemeinsame Komponente, auf die von anderen Komponenten aus zugegriffen werden kann.
Installieren und verwenden Sie die Komponente Angular Material, um einen Bestätigungsdialog in Angular zu erstellen
Webbasierte Anwendungen haben normalerweise die integrierte JavaScript-Funktionalität verwendet, um Warnungen und Dialoge anzuzeigen. Die Vanilla-JavaScript-Dialogfelder hingegen sind zeitgemäß, was bedeutet, dass alles auf dem Bildschirm angehalten wird, bis der Benutzer antwortet, und sie können nicht visuell geändert werden.
Aber jetzt haben sich die Dinge geändert; Mit etwas Hilfe der Material-Komponenten können wir schnell ein dynamisches Bestätigungs-Popup in Angular entwerfen.
Zuerst müssen Sie das Angular Material mit Hilfe des folgenden Codes installieren.
npm install --save @angular/material @angular/cdk @angular/animations
Jetzt ist es an der Zeit, die folgenden wichtigen Abhängigkeiten nach der Installation von Angular Material zu importieren. Weitere Informationen zu Angularmaterial finden Sie hier klicken.
import { NgModule } from '@angular/core';
import {MatDialogModule } from '@angular/material/dialog' ;'@material/button';
@NgModule({
imports: [
MatDialogModule
],
exports: [
MatDialogModule
]
})
export class CustomMaterialModule { }
Erstellen Sie mit dem folgenden Befehl eine neue Komponente mit dem Namen confirm-dialog.
ng generate component confirm-dialog
Die Dialogkomponente wird in einem Ordner erstellt und dem Deklarationsarray app.module.ts hinzugefügt.
Es ist erwähnenswert, dass das Modul MatDialog Komponenten zur Laufzeit erstellt. Infolgedessen möchte Angular weitere Informationen von uns.
Die Komponentenklasse sollte im Array entry components in unserer NgModule-Spezifikation für jede Komponente enthalten sein, die in einen Dialog geladen wird.
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 { }
Nachdem Sie die vorherigen Schritte ausgeführt haben, ist es an der Zeit, der Komponente direkt Code hinzuzufügen.
<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) {
}
}
Die Konstruktormethode macht zwei Dinge: Sie stellt eine Verbindung zum Fenster her und fügt die darauf angezeigte Nachricht ein. Beide werden von der Komponente bereitgestellt, die das Popup initiiert.
Kommen wir zum letzten Schritt. Letztendlich können wir den folgenden Code verwenden, um unseren benutzerdefinierten Bestätigungsdialog anzuzeigen.
Da wir die Komponente MatDialog intern verwenden, binden wir die Abhängigkeit MatDialog in den Konstruktor ein und zeigen den Bestätigungsdialog an, wenn auf die Schaltfläche geklickt wird. Wir können das Ergebnis erhalten und die Ansicht mithilfe von Datenbindung ändern, indem wir auf das Ereignis afterClosed() des Dialogs hören.
Um den Dialog zu initiieren, fügen Sie der Ansicht eine Schaltfläche und ein Label hinzu, um die Antwort anzuzeigen.
<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