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

标签 angular angular-material

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

  • 我正在尝试在发送数据后成功关闭对话框
    成功到服务器,

  • I used this.dialogRef.close(0); or this.dialogRef.close(0); or this.dialogRef.close(); but still it is not working



    我把我的代码放在下面

    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);
                }
              );}}
    

    最佳答案

    你有这个错误是因为你在 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

    关于angular - 来自 Angular Material 的 MatDialog 对话框没有关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55146484/

    相关文章:

    angular - 模板解析错误 : There is no directive with "exportAs" set to "cdkDropList"

    css - 即使放大和缩小后也保持图像尺寸相同

    angular - <mat-select> 中没有足够的空间。如何添加多行 <mat-option>?

    angular - ngIf - else 与两个 ngIf 条件

    javascript - 更新 chartjs 和 angular 中的图表

    angular - 尝试扩展 FormControlDirective 以实现我自己的 FormControl 指令导致绑定(bind)错误

    angular - 在哪里可以找到特定版本的文档

    css - Angular Material 排版 - 定制

    angular - 如何使用angular2 material Dialog 来block for canDeactivate

    不支持它的浏览器上的 Angular Service Worker