0

当我调用 MatDialogRef 实例的函数 close 时，对话框应该关闭，但它没有。

我有一个名为 ShareModule 的模块，其中包含 HeaderCompose 和 LoginComponent。HeaderComponent 使用 LoginComponent 来对话。

<div class="HomeHeader-userinfo-2-nbm"><img class="HomeHeader-portrait-xqqY2"
            src="/assets/img/header-portrait.png"><span class="HomeHeader-login-D2hkS"
            style="color: rgb(253, 85, 83);"><span (click)="openDialog()">Login</span> | <span
                (click)="openDialog()">Register</span></span>
    </div>

TS：

constructor(public dialog: MatDialog) { }

openDialog(): void {
    const dialogRef = this.dialog.open(LoginComponent, {
      panelClass: 'custom-dialog-container',
      data: {name: 'alo', animal: 'dog'}
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }

在 LoginComponent 我有一个这样的按钮：

<div class="Login-close-j_-2T" [mat-dialog-close]="true" (click)="onNoClick()"><img src="/assets/img/login-close.png"></div>

和 TS：

constructor(public dialogRef: MatDialogRef<LoginComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

onNoClick(): void {
    this.dialogRef.close();
  }

我将 ShareModuel 导入一个名为 HomeModule 的模块并使用 HeaderComponent。

当我按下一个按钮时，对话框显示，但是当我按下关闭按钮时，它应该关闭但它没有。我试过 [mat-dialog-close] 但它仍然不起作用。

4

1 回答 1

0

要关闭对话框，您需要在构造函数之前声明一个事件发射器，以便打开对话框的函数知道您何时关闭了对话框：

@Output() onChange = new EventEmitter()
constructor(public dialogRef: MatDialogRef<LoginComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

onNoClick(): void {
    this.dialogRef.close();
  }

还要订阅其他 TS 中 dialogRef 的变化：

const sub = dialogRef.componentInstance.onChange.subscribe(
      ()=>{
        this.ngOnInit() //or whatever you want to do after dialog closes 
      }
    )
于 2021-06-06T07:25:25.713 回答