来自 Angular Material 的 MatDialog 对话框没有关闭

Question

我正在使用 Angular 材质对话框的 Angular 6 应用程序

• 我试图在我的数据成功发送到服务器后成功关闭对话框，

我用过 this.dialogRef.close(0); 或 this.dialogRef.close(0); 或 this.dialogRef.close(); 但它仍然不起作用

我把我的代码放在下面

组件1.ts

let NewRegDialog = this.dialog.open(NewRegistrationComponent, {

  width: '750px',
  height: '500px',
  //disableClose: true,
  data: {
    email : email,
    regType : regType,
  },
});

NewRegDialog.afterClosed().subscribe(result => {

  if(result == 1){
    this.dialogRef.close('signup');
  }else{
    alert('Login failed') ;
    });

组件2.ts

    import { Component, OnInit , Inject } from '@angular/core';
    import {  MatDialog  , MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';


   ... .. 
   .. .. 

      constructor( private restapi: ServicesService , private dialog: MatDialog ,   public dialogRef: MatDialogRef<NewRegistrationComponent>,
        @Inject(MAT_DIALOG_DATA) public data: any ) {

   ...
   ..... 
   }


     user_signup(data) {


          let userData = {Email: this.email };
          this.restapi.signupUsingSocial(userData).then(
            result => {
              this.responseData = result;

              if (this.responseData.status == 1) {
                localStorage.setItem('token', this.responseData.data);
                this.dialogRef.close(1);

              } else {
                alert('give proper input');
              }
            },
            err => {
              this.dialogRef.close(0);
            }
          );}}

Answer 1

你有这个错误是因为你在 NgZone 之外打开了对话框。

一个简单的解决方法是在构造函数中导入 NgZone：

constructor(public dialogRef: MatDialogRef<ModalComponent>, private ngZone: NgZone) { }

然后在 NgZone 中运行代码

onNoClick(): void {
this.ngZone.run(() => {
  this.dialogRef.close();
});

}

这篇文章解释了什么是 NgZone：https ://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html

Answer 2

对我来说，解决方案是确保我BrowserAnimationsModule在我的NgModule.

Answer 3

您可以从您拥有的组件中关闭对话框

let NewRegDialog = this.dialog.open(NewRegistrationComponent, {

在您的示例中，component1 有dialog.open 方法。为什么你尝试在 component2 中关闭？