点击谷歌地图上的标记后，角度生命周期不再触发 - Ionic 3

Posted 2021-04-17

我通过cordova-plugin-googlemaps (v2.1.1)使用@ionic-native/google-maps (v4.4.2)。

我有一个地图索引（称为EstablishmentsPage），我在地图或列表中显示。在地图中我听点击标记，然后我显示detailPage。在列表上只是一个按钮。

地图：

marker.on(GoogleMapsEvent.MARKER_CLICK)
    .subscribe(() => {
        this.navCtrl.push(EstablishmentPage, { establishment });
    })

列表：

onClick(establishment: Establishment) {
    this.navCtrl.push(EstablishmentPage, { establishment });
}

两者都打开了我的detailPage，但是使用地图中的一个，变量/ getter的所有更改都不再“绑定”回视图。 （当我点击“心形按钮”时，我看到方法toggleAsFavorite()的日志，但它在视图中看起来确实如此）。

ngDoCheck()和ngOnChanges()不再被称为（所有的ngOnInit，ionViewDidLoad等都像往常一样被称为）。我试图在this.navCtrl.push(...)之前隐藏或删除地图juste或用push替换setRoot。我还做了一整页只有地图而不是两个组件。但仍然遇到这个问题。

我的配置：cli包：（/ usr / local / lib / node_modules）

@ionic/cli-utils  : 1.19.1
ionic (Ionic CLI) : 3.19.1

全球套餐：

cordova (Cordova CLI) : 7.0.1 

本地包裹：

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.9.2

系统：

Node  : v6.10.3
npm   : 5.6.0 
OS    : macOS Sierra
Xcode : Xcode 9.2 Build version 9C40b 

环境变量：

ANDROID_HOME : not set

其他：

backend : legacy

答案

如果您不使用angular-google-maps（或类似），GoogleMaps代码可能会在Angulars区域外运行。

您可以通过强制回调进入区域来解决此问题

constructor(private zone:NgZone) {}

...

marker.on(GoogleMapsEvent.MARKER_CLICK)
.subscribe(() => {
    this.zone.run(() => {
      this.navCtrl.push(EstablishmentPage, { establishment });
    });
})    

然后Angular再次能够识别何时必须运行变化检测。