Question

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

发送数据后，我尝试成功关闭对话框成功连接到服务器，

我使用了this.dialogRef.close（0）;或this.dialogRef.close（0）;或this.dialogRef.close（）;但仍然无法正常工作

我将代码放在下面

component1.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') ;
    });

component2.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

您可以从所在的位置关闭对话框

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

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

Answer 2

您可以尝试：

 <div mat-dialog-actions>
    <button (click)="close()">close</button>
 </div>

和您的ts中：

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

Answer 3

出现此错误是因为您在NgZone之外打开了对话框。

一个简单的解决方法是将NgZone导入到Costuctor中：

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 4

我在此花费了很多时间，发现在弹出窗口中，我有一个表单触发了chrome控制台上javascript中的错误。解决此表单错误后，我的弹出窗口得以关闭。我建议您解决此问题是错误的，您可以尝试用一种基本的方式替换模态中的内容，以测试关闭按钮的功能。

转到https://material.angular.io/components/dialog/examples，然后选择“示例”标签，然后在按钮<>中检查第一个样品的代码。然后，将对话框的内容替换为dialog-content-example-dialog.html

中的内容。

现在应该解决了，希望对您有用

此致

胡安

Answer 5

如果您在另一个组件的 ngOnChanges 中发生错误，则可能导致这种无法关闭的对话框行为。

Answer 6

对我来说，解决方案是确保在我的 BrowserAnimationsModule 中导入 NgModule。

Angular Material的MatDialog对话框未关闭

6 个答案: