在Google Maps事件监听器中打开Angular Material对话框为空

Question

我在项目中使用Angular 6.0.6和Angular Material 6.3.0。我已将对话框组件添加到entryComponents应用程序模块中。如果直接在仪表板组件中打开该对话框，效果很好，但是在大多数情况下，当我在rightclickGoogle Maps标记的事件处理程序中打开该对话框时，该对话框为空。

在这种情况下，它为空：

private attachEvents(wo) {
  wo.marker.addListener('rightclick', (e) => {
    this.dialog.open(DialogAlert, {
      width: '400px',
      data: {
        confirmation: true,
        message: 'test',
        title: 'X'
      }
    });
  });
}

如果我将open代码放在外面wo.marker.addListener，效果很好。

乐于听到任何建议以使其在事件处理程序中正常运行。我尝试在事件处理程序中调用detectChanges（ChangeDetectorRef），但无济于事。

对话框的HTML代码：

<h1 mat-dialog-title>{{data.title ? data.title : defaultTitle}}</h1>
<div mat-dialog-content>
  <p>{{ data.message }}</p>
</div>
<div mat-dialog-actions>
  <button *ngIf="confirmation" mat-raised-button (click)="onNoClick()">Cancel</button>

  <button *ngIf="confirmation && !options" mat-raised-button (click)="onConfirmClick()" cdkFocusInitial>Yes</button>
  <button color="primary" *ngFor="let o of options;  index as i" mat-raised-button (click)="onConfirmClick(i)">{{o}}</button>

  <button *ngIf="!confirmation" mat-raised-button (click)="onConfirmClick()" cdkFocusInitial>OK</button>
</div>

如果我在HTML开头（在mat-dialog-title，，之外）放置一些内容mat-dialog-content，mat-dialog-actions它将显示出来。

还有更多信息：

• 控制台中没有错误/警告。
• 我无法通过单击阴影区域来关闭对话框。（当它不为空时，我可以）
• 在极少数情况下，会显示内容，有时会稍有延迟。
• 打开空白对话框并调整浏览器窗口大小时，将显示内容。
• 我在最新版本的Google Chrome中对其进行了测试

Answer 1

@yurzui评论有所帮助。非常感谢！因此解决方案是：

尝试通过zone.run（

因此，在我的示例中，应该更改的内容：

1. 添加private zone: NgZone到组件构造函数。
2. 通过打开对话框zone.run(。

示例函数现在看起来像这样：

private attachEvents(wo) {
  wo.marker.addListener('rightclick', (e) => {
    this.zone.run(() => {
      this.dialog.open(DialogAlert, {
        width: '400px',
        data: {
          confirmation: true,
          message: 'test',
          title: 'X'
        }
      });
    });
  });
}

PS。我的实际代码略有不同，但是流程和想法是相同的。这样，我想说的是我没有运行上面发布的代码，因此，如果将其复制并粘贴到某处，则可能无法正常工作。