Angular 在谷歌地图上显示模态-角度5

我正在做一个小项目，我想使用谷歌地图JSAPI（当前版本）。前端位于带有Typescript的Angular 5上。问题是，当用户单击地图上的任何位置时，我想在地图上显示一个模式窗口。我成功地触发了模态打开，没有任何问题，尽管模态上的动画不起作用，DatePicker没有渲染，我也不能通过单击按钮来关闭它。在调整浏览器窗口的大小后，它似乎会将其状态更改为半工作状态，例如，当我单击“关闭”按钮，然后调整浏览器窗口的大小时，它会正确关闭。我使用的是有角度的材质模型。在应用程序中的其他地方，模态可以正常工作。此外，地图加载后，它会更改与任何内容都不相关的顶部菜单样式。 我尝试以编程方式调用map的resize事件，但它没有改变任何东西。 map.component.ts的代码：

import { Component, Inject, ElementRef, ViewChild, OnInit } from     
'@angular/core';
import { MatDialog } from '@angular/material';
import { MeetingDialogComponent } from '../meeting-dialog/meeting-dialog.component';

declare const google: any;

@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
    constructor(public dialog: MatDialog, private router: Router) {
    }

    @ViewChild('mapDiv') mapDiv: ElementRef;
    public map: google.maps.Map;
    private markers: google.maps.Marker[] = [];
    private clickListener: google.maps.MapsEventListener;

    initMap() {
        this.map = new google.maps.Map(this.mapDiv.nativeElement, {
            center: { lat: 53.921, lng: 19.037 },
            zoom: 8,
            disableDefaultUI: true
        });
        this.clickListener = this.map.addListener('click', (event) => {
            this.addMarker(event.latLng);
        });
    }

    private addMarker(location) {
        let marker = new google.maps.Marker({
            position: location,
            map: this.map
        });
        this.markers.push(marker);
        this.showMeetingModal();
    }

    private showMeetingModal() {
        this.dialog.open(MeetingDialogComponent, {
        });
    }

    ngOnInit() {
        this.initMap();
    }
}

map.component.html的代码：

<div #mapDiv id="map"></div>

我认为modal的代码是不相关的，因为它在应用程序的其他地方可以正常工作。提前感谢您的时间

编辑：这里是stackblitz示例的链接

---

好的，我设法找到了答案。由于谷歌地图触发的事件不在Angular的上下文范围内，因此会导致这种奇怪的行为。
我所要做的一切就是在NgZone.run方法中调用打开模态 因此，当订阅地图上的点击事件时，我的代码如下所示：

this.map.addListener('click', (event) => {
    this.zone.run(() => {
      this.addMarker(event.latLng);
    });
  });

---

我必须在map的组件构造函数中注入NgZone。

好的，我设法找到了答案。由于谷歌地图触发的事件不在Angular的上下文范围内，因此会导致这种奇怪的行为。
我所要做的一切就是在NgZone.run方法中调用打开模态 因此，当订阅地图上的点击事件时，我的代码如下所示：

this.map.addListener('click', (event) => {
    this.zone.run(() => {
      this.addMarker(event.latLng);
    });
  });

---

我不得不在map的组件构造函数中注入NgZone。

你能发布

stackblitz

代码示例吗？给你！如您所见，如果您在单击地图后在编辑器内调整窗口大小，它将启动模态动画等。您可以发布

stackblitz

code示例吗？给您！如您所见，如果在单击贴图后在编辑器内调整窗口大小，它将启动模态动画等。