Angular2 재료 대화상자 자체 닫기

Angular2 재료 대화상자 자체 닫기

나는 angular2 소재를 사용했습니다.MdDialog양식을 표시합니다.

사용자가 양식을 제출하면 백엔드로 요청이 전송되고 요청이 성공하면 대화상자를 닫아야 합니다.백엔드 요청이 실패하면 대화 상자를 열어 두어야 합니다.

아래와 같은 버튼을 사용하여 대화상자를 닫을 수 있습니다.

<button md-raised-button md-dialog-close>Cancel</button>

그러나 이 경우 백엔드 요청이 성공한 경우에만 대화 상자를 닫으면 되므로 대화 상자를 프로그래밍 방식으로 닫을 수 있는 방법이 필요합니다.

대화 상자 안에 표시된 구성 요소에는 대화 상자 참조가 없고 구성 요소에서 대화 상자를 직접 닫을 수 있는 다른 방법이 없습니다.

대화 상자 내부의 구성 요소에서 대화 상자를 닫을 수 있는 방법이 있습니까?

대화 상자에서 닫으려면 다음을 수행합니다.

constructor(private dialogRef: MatDialogRef<MyDialogComponent>){ }

closeDialog(){
  this.dialogRef.close();
}

---

대화 상자의 부모에서 닫으려면 다음을 수행합니다.

constructor(private matDialog: MatDialog){}

//anywhere
let dialogRef = this.matDialog.open(MyDialogComponent);
dialogRef.close();

승인된 답변에 명시된 바와 같이

this.dialogRef.close();

대화 상자를 닫습니다.그러나 대부분의 경우 페이지를 새로 고치지 않고 서버의 응답이 즉시 렌더링되기를 원합니다.이를 위해 아래와 같이 클로즈 방법에 대한 인수로 응답을 전달합니다.

this.dialogRef.close(response);

만약 당신이 이것을 한다면, 당신은 문서들에서 발견된 이벤트 이미터 접근을 할 필요가 없습니다.

<button mat-button [mat-dialog-close]="response" cdkFocusInitial>Add</button>

비동기 작업이 끝나기 전에 대화 상자가 닫히기 때문입니다.

다음은 저에게 잘 맞습니다.

this.matDialog.closeAll();

언급URL : https://stackoverflow.com/questions/44735334/angular2-material-dialog-self-close