Question

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

在这种情况下为空：

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输入ngZone（

所以在我的示例中，应该更改的内容：

将private zone: NgZone添加到组件构造函数。
通过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。我的实际代码略有不同，但是流程和想法是相同的。这样，我想说的是我没有运行上面发布的代码，因此，如果将其复制并粘贴到某处，则可能行不通。

在Google Maps事件监听器中打开时，“角材料”对话框为空

1 个答案: