angular6 - 角度 Material 模态对话框无法将事件传递给父级？

Question

我有一个组件，它有一个子组件。子组件有一个按钮，可以打开一个 Material 对话框。
在对话框中，我们有表单、用户名和密码以及提交按钮。当我提交时，我正在调用后端 REST api。

这在子组件中被调用:

dialogRef.afterClosed().subscribe(result => {
      console.log("result", result);
      this.onModalClosePassData.emit(result);//emit to parent
    });

这是向 parent 发送事件。 updateComment() 正在被调用，我可以在控制台中看到数据。

但是当我填写表格并点击提交时。它调用 submitForm 方法，这是异步调用，我在成功登录后关闭对话框。但是事件没有发出。 updateComment() 没有被调用。

查看完整代码:

parent component.html

<ng-template #showTextOnly>
        <child-component [branch]="releaseBranch" [date]="dateString"
                  (onModalClosePassData)="updateComment($event)">
        </child-component>
</ng-template>

parent component.ts

//This method is getting called when i click on backDrop, 

但如果我成功登录，这不会被调用
更新评论(事件:任何){
consile.log(事件)；
}

child-component.html

<button class="btn btn-default" (click)="openDialog()">Login</button>

child-component.ts

export class ChildComponent implements OnInit {
    @Output() onModalClosePassData = new EventEmitter();
    constructor(public dialog: MatDialog) { }
    openDialog(): void {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = false;
    dialogConfig.autoFocus = false;
    dialogConfig.hasBackdrop= true;
    dialogConfig.width = '300px';
    dialogConfig.autoFocus=true;
    dialogConfig.data = {branch: this.branch, date: this.date};
    const dialogRef = this.dialog.open(LoginDialog, dialogConfig);

    dialogRef.afterClosed().subscribe(result => {
      console.log("result", result); //result is getting called in both cases
      this.onModalClosePassData.emit(result);
    });
 }
}

LoginDialog.component.ts

import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
export class LoginDialog implements OnInit{
    constructor(private loginService: LoginService, public dialogRef: MatDialogRef<LoginDialog>,
      @Inject(MAT_DIALOG_DATA) public data: any) {}
      public submitForm = (formValue: any) => {
      if (this.noteForm.valid) {
        let encryptData = btoa(`${formValue.username}:${formValue.password}`);
        this.loginService.login(encryptData)
         .subscribe((response:any)=>{
             if(response.STATUS === "FAILED"){
             } else {
              this.dialogRef.close(this.noteDetail);
             }
        })
      }
    }

}
LoginDialog.component.html

<form [formGroup]="noteForm" autocomplete="off" novalidate (ngSubmit)="submitForm(noteForm.value)">
<mat-dialog-content class="mat-typography">
        <mat-form-field>
                <mat-label>User Name</mat-label>
                <input matInput type="text" formControlName="username" id="username">
        </mat-form-field>
        <mat-form-field>
                <mat-label>Password</mat-label>
                <input matInput type="password" formControlName="password">
        </mat-form-field>
</mat-dialog-content>
<mat-dialog-actions align="center">
  <button mat-raised-button color="primary" [disabled]="!noteForm.valid">Submit</button>
</mat-dialog-actions>
</form>

Answer 1

我遇到了同样的问题并想通了，这可能对其他人有用。
当我们在模态上使用自定义组件时，我们会遇到这个问题。例如，我们在弹出模态上有 formComponent 并且在提交时我们需要关闭模态并发出表单值，这应该可以工作，但是当我们的 formComponent 在发出值之前被销毁时，我们可能会面临这个问题。
这是因为我们稍后在表单提交时在 Modal 上打开了 formComponent 我们关闭了包含 formComponent 的模式并打开了成功模式然后尝试发出值。
解决方案是:在发出值之前不要关闭包含 formComponent 的模态，否则使用服务触发。