Question

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

我知道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}`);
  }

非常感谢您的帮助。

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

Answer 2

问题在于，您必须使用以下Dialog组件的名称将entryComponents数组添加到app.module.ts中：

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

Answer 3

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

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

...

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

希望这对任何人都有用。

Answer 4

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

删除了链接

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

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

角材料对话框立即关闭

4 个答案: