Angular の確認ダイアログ
確認ダイアログは、ユーザーが実行しようとしているアクションを確認するために使用されます。また、ユーザーが無効な入力データを持っている場合は、エラーメッセージが表示されます。
この記事では、Angular Material を使用して Angular で確認ポップアップを作成する方法について説明します。他のコンポーネントからアクセスできる新しい共通コンポーネントを作成します。
Angular Material コンポーネントをインストールして使用し、Angular で確認ダイアログを作成する
Web ベースのアプリケーションは通常、組み込みの JavaScript 機能を使用してアラートとダイアログを表示します。一方、バニラ JavaScript ダイアログボックスは現代的です。つまり、ユーザーが返信するまで画面上のすべてが停止し、視覚的に変更することはできません。
しかし今、状況は変わりました。Material コンポーネントの助けを借りて、Angular で動的確認ポップアップをすばやく設計できます。
まず、次のコードを使用して Angular Material をインストールする必要があります。
npm install --save @angular/material @angular/cdk @angular/animations
次に、Angular Material をインストールした後、次の重要な依存関係をインポートします。Angular Material の詳細については、ここをクリックしてください。
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) {
}
}
コンストラクターメソッドは 2つのことを行います。ウィンドウに接続し、ウィンドウに表示されるメッセージを挿入します。どちらも、ポップアップを開始するコンポーネントによって提供されます。
最後のステップに飛び込みましょう。最終的には、以下のコードを使用して、カスタム確認ダイアログを表示できます。
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