Angular의 확인 대화 상자
확인 대화 상자는 사용자가 수행하려는 작업을 확인하는 데 사용됩니다. 또한 사용자에게 잘못된 입력 데이터가 있는 경우 오류 메시지가 표시됩니다.
이 기사에서는 Angular Material을 사용하여 Angular에서 확인 팝업을 만드는 방법을 설명합니다. 다른 구성 요소에서 액세스할 수 있는 새 공통 구성 요소를 만듭니다.
Angular Material 구성 요소를 설치하고 사용하여 Angular에서 확인 대화 상자 만들기
웹 기반 응용 프로그램은 일반적으로 기본 제공 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) {
}
}
생성자 메서드는 두 가지 작업을 수행합니다. 창에 연결하고 창에 표시된 메시지를 삽입합니다. 둘 다 팝업을 시작하는 구성 요소에서 제공합니다.
마지막 단계로 넘어갑시다. 궁극적으로 아래 코드를 사용하여 사용자 지정 확인 대화 상자를 표시할 수 있습니다.
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