Angular Material 对话框立即关闭答案

【问题标题】：Angular Material Dialog closes immediatelyAngular Material 对话框立即关闭
【发布时间】：2020-06-02 11:22:37
【问题描述】：

我尝试从我的组件中打开一个 Angular Material 对话框。但对话框在打开后立即关闭。

我知道 Stackoverflow 上有一些类似的问题，但他们的答案似乎对我不起作用。不确定从订阅的完整部分调用对话框功能是否是问题所在。

ExampleDialogComponent.ts

export class ExampleDialogComponent implements OnInit {

  inputVal1: string;
  inputVal2: string;

  constructor(public dialogRef: MatDialogRef<ExampleDialogComponent>,
              @Inject(MAT_DIALOG_DATA) public data: any, private formBuilder: FormBuilder) {
    this.inputVal1 = data.inputVal1;
    this.inputVal2 = data.inputVal2;
  }

  ngOnInit() {
    this.firstFormGroup = this.formBuilder.group({
      firstCtrl: ['', Validators.required]
    });
    this.secondFormGroup = this.formBuilder.group({
      secondCtrl: ['', Validators.required]
    });
  }

  onCloseConfirm() {
    setTimeout(() => {
      this.dialogRef.close({
      message: 'Confirm',
      outputVal1: this.inputVal1,
      outputVal2: this.inputVal2,
      });
    }, 0);
  }
}

ExampleDialogComponent.html

<mat-step>
      <ng-template matStepLabel>last step</ng-template>
      <mat-dialog-actions>
        <button mat-button [mat-dialog-close]="onCloseConfirm()">add</button>
        <button mat-button mat-dialog-close>close</button>
      </mat-dialog-actions>
</mat-step>

MainCompontent.ts

openModal() {
    this.inputs = [];
    this.http.getInputs().subscribe(
      data => {
        data.forEach(element => this.inputs.push(element));
      },
      (err) => {
        console.log(err);
      },
      () => {
        this.openAddDialog();
      });
  }

  openAddDialog() {
    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.data = {
      inputValue1: 'test 1',
      inputValue2: 'test 2',
    };

    const dialogRef = this.dialog.open(ExampleDialogComponent, dialogConfig);

    dialogRef.afterClosed().subscribe(result => {
      console.log('Dialog was closed');
      console.log('result: ' + result);

      this.http.createResultinDB(result);
        .subscribe(subData => console.log(subData), error => console.log(error));
    });
  }

  getDeliveryPackageList(): Observable<any> {
    return this.http.get(`${this.baseUrl}`);
  }

非常感谢您的帮助。

【问题讨论】：

Stackblitz 将更有助于重现问题
您是否将其作为 entryComponent 添加到您的模块中？除非您使用的是 Angular 9，否则您需要这样做。看到这个...stackoverflow.com/questions/41519481/…

标签： angular typescript angular-material

【解决方案1】：

此行导致问题：

<button mat-button [mat-dialog-close]="onCloseConfirm()">add</button>

onCloseConfirm 函数会在对话框打开时立即被调用，因为角度绑定是如何工作的。

您有几个选择。您可以在按钮上使用单击处理程序来调用您的函数：

<button mat-button (click)="onCloseConfirm()">add</button>

您或您可以继续使用 [mat-dialog-close]，而不使用您的 onCloseConfirm 函数：

<button mat-button [mat-dialog-close]="[inputVal1, inputVal2]">add</button>

【讨论】：

感谢您的精彩解释。对我来说效果很好。

【解决方案2】：

问题是你必须在你的 app.module.ts 中添加 entryComponents 数组，你的 Dialog 组件的名称如下：

@NgModule({
  entryComponents: [
    ExampleDialogComponent
  ],
  declarations: [...],
.
.
.
})

【讨论】：

感谢您的提示。在 entryCompontents 和声明中添加了 ExampleDialogComponent，但问题仍然存在。

【解决方案3】：

对我来说，问题的根源是不同的。我有一个带有（点击）属性的超链接。当我点击超链接时，打开对话框的函数被调用，但事件被传播到<a>元素的href，打开后立即关闭对话框。解决方案是停止传播。

<a href="#" (click)="$event.preventDefault(); aboutMyApp();">About...</a>

...

aboutMyApp() {
    const dialogRef = this.dialog.open(AboutDialog, { width: '400px', height: 'auto' });
}

希望这对任何人都有用。

【讨论】：

谢谢...这完美解决了我的问题

【解决方案4】：

删除链接解决了我的问题，我从

中删除链接

 <a class="fa fa-user" aria-hidden="true" href="/#/home/homepage" (click)="opendialogue()" >&nbsp;Profile</a>

我删除了不需要的链接，即href="/#/home/homepage"，以克服自动关闭对话

【讨论】：

欢迎来到 StackOverflow。请花一些时间阅读help page 以获取最小的、可重现的示例。