角度材质对话框立即关闭

Question

我尝试从我的组件中打开“角度材质”对话框。但对话框打开后立即关闭。

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

示例DialogComponent.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);
  }
}

示例DialogComponent.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>

主要组件.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}`);
  }

非常感谢您的帮助。

Answer 1

对我来说，问题的根源是不同的。我有一个带有（点击）属性的超链接。当我单击超链接时，打开对话框的函数被调用，但事件被传播到

<a>

元素的 href，打开对话框后立即关闭。解决方案是停止传播。

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

...

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

希望这对任何人都有用。

Answer 2

此行导致了问题：

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

Answer 3

问题是您必须将

entryComponents

数组添加到 app.module.ts 中，其中包含对话框组件的名称，如下所示：

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

Answer 4

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

删除了链接

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

我删除了不需要的链接，即

href="/#/home/homepage"

以克服自动关闭对话框的问题

Answer 5

对我来说，问题在于 HammerJS。我认为最好不要混合本机事件和 HammerJS 事件，因此我使用

(tap)

绑定来打开对话框，并使用

(press)

来打开其他内容。

当我使用

(click)

而不是点击时，问题就解决了。

而且

(tap)

似乎仍然有效。