0

我有一个不寻常的问题，即我打开的 MatDialog 组件不会在我的 Angular 应用程序中关闭。我在调用组件中不使用 HTML 作为视图，而是使用 SVG，它的处理方式略有不同。不幸的是，我无法弄清楚问题所在。

这是调用组件：

调用组件.ts

  constructor(public dialog: MatDialog) {}

  openDetailsDialog() {
    const dialogRef = this.dialog.open(NodeDetailsComponent, {
      width: '250px',
      data: {componentTitle: this.componentTitle},
      backdropClass: 'node-details-backdrop'
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log("NodeDetailsDialog closed.");
      this.componentTitle = result;
    });
  }

调用组件.svg

<svg:rect [class]="classes" x="50" y="20" rx="20" ry="20"></svg:rect>
<svg:g ng-node-content></svg:g>
<svg (click)="openDetailsDialog()">
  <g>
    <svg:rect class="test" x="110" y="75" rx="5" ry="5"></svg:rect>
    <svg:text x="119" y="90" font-family="Verdana" font-size="15" fill="black">O</svg:text>
  </g>
</svg>
<svg:g [baseNode]="baseNode" ng-node-controls></svg:g>

openDetailsDialog() 方法打开对话框，该对话框可以正常工作。只是它不能关闭。现在跟随被调用的组件：

节点详细信息组件.ts

export class NodeDetailsComponent {

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

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

NodeDetailsComponent.html

<h1 mat-dialog-title>{{data.componentTitle}}</h1>
<div mat-dialog-content>
  <p></p>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">Close</button>
</div>

如果需要更多信息来调试它，那么我很乐意提交它！

4

2 回答 2

0

我设法找到了一个解决方案，这让我有点恼火，因为我没有找到任何关于这个的建议，也没有从我上面的代码片段中得到任何错误或异常。

所以，我们开始吧：我只需要将 BrowserAnimationsModule 添加到我的 @NgModule 导入中，如下所示：

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    MatDialogModule,
    BrowserAnimationsModule
  ],
  exports: [
    ...
  ]
})

而已。这就是全部的魔法。

于 2021-10-05T23:45:36.350 回答
0

如果您只想.close 它，而不发送任何值，您可以使用 mat-dialog-close

    <button mat-button mat-dialog-close>Close</button>
于 2021-10-03T21:33:39.817 回答