(@angular/material/dialog) MatDialogRef에 관해

(@angular/material/dialog) MatDialogRef에 관해

로드할 컴포넌트와 선택적인 config object를 파라미터로 주어

open 메서드를 호출하면 다이얼로그가 열린다.

이 open 메서드는 MatDialogRef의 인스턴스로 반환된다.

let dialogRef = dialog.open(UserProfileComponent, { height: '400px', width: '600px', });

MatDialogRef는 열린 다이얼로그를 조작할 수 있게 제공한다.

이는 dialog를 닫고 다이얼로그가 닫혔을때 알림을 받을수 있도록 사용할 수 있다.

모든 알림 Observables는 다이얼로그가 닫힐때 발생된다.

dialogRef.afterClosed().subscribe(result => { console.log(`Dialog result: ${result}`); // Pizza! }); dialogRef.close('Pizza!');

위와같이 close 메서드에 "Pizza!" 라는 String 값을 전달하여,

다이얼로그가 닫혔을때에 이 값을 전달받을 수 있다.

이를 활용하여 아래와 같이 Object형식으로 data를 전달할 수 있다.

this.passMyPersonalData('Bumday', 27, 'Singing'); passMyPersonalData(nickname, age, hobby){ let data = {'nickname': nickname, 'age': age, 'hobby': hobby}; dialogRef.close(data); } dialogRef.afterClosed().subscribe(result => { console.log(`His nickname: ${result['nickname']}`); // His nickname: Bumday console.log(`His age: ${result['age']}`); // His age: 27 console.log(`His hobby: ${result['hobby']}`); // His hobby: Singing });

MatDialog를 통해 생성된 컴포넌트는 MatDialogRef를 주입하고,

이를 통해 포함된 다이얼로그를 닫을 수 있다.

@Component({/* ... */}) export class YourDialog { constructor(public dialogRef: MatDialogRef) { } closeDialog() { this.dialogRef.close('Pizza!'); } }

[References]

https://material.angular.io/components/dialog/overview

from http://bumday.tistory.com/30 by ccl(A) rewrite - 2021-11-13 21:27:43