javascript - 在 Google map 事件监听器中打开时，Angular Material 对话框为空

Question

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

在本例中它是空的:

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 评论有帮助。多谢!所以解决办法是:

Try entering ngZone through zone.run(

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

1. 将私有(private)区域: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。我的真实代码略有不同，但流程和想法是相同的。我想说的是，我没有运行上面发布的代码，因此如果您将其复制并粘贴到某个地方，它可能无法工作。