Angular Mat 对话框没有关闭

Question

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

这里是调用组件：

CallingComponent.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;
    });
  }

CallingComponent.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() 方法打开对话框，该对话框可以正常工作。只是那时不能关闭。现在跟随被调用的组件：

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

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

Answer 1

如果您只想要 to.close 它，无需发送任何值，您可以使用 mat-dialog-close

    <button mat-button mat-dialog-close>Close</button>

Answer 2

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

所以，我们开始吧：我只需要像这样将 BrowserAnimationsModule 添加到我的 @NgModule 导入中：

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

就是这样。这就是全部魔法。

Angular Mat 对话框没有关闭

Angular Mat Dialog does not close

angular-material

angular

mat-dialog