Nativescript 导航、ngrx 和地图（google、MapBox）存在订阅者/导航问题

Question

编辑：在导航到不同的组件后，我的变更检测和生命周期似乎完全中断。为什么？

我在 Google 地图和 mapbox 的 nativescript 和基于 nativescript 地图的插件上的@ngrx/store 遇到了一些奇怪的问题。代码正确，地图与数据（标记集）完美加载，但在订阅或导航方面存在问题。

我都试过了，在我尝试导航之前它们都可以正常工作；

使用谷歌地图：

在我尝试再次向后/向前导航到地图之前，导航和订阅其他页面中的数据非常完美。 google map 的 onReady 方法总是出错。

使用地图框：

导航工作正常，包括返回地图。但是，在我导航回原始地图组件之前，我的异步管道实际上无法填充其他页面数据！！！我假设订户在导航时不会被触发。如果我不使用 ngOnDestroy() 取消订阅，我设法让它几乎可以工作，但这显然会发送旧的或错误的数据。

这里是代码

地图页面（第一个组件）：

ngOnDestroy() {
    this.subscription.unsubscribe();
}

这是 mapbox 代码，但它与 googlemaps 类似，在加载地图并添加标记时执行（在 googlemaps 或 mapbox 上都没有问题）。

onMapReady(args) {
        let mapMarkers = [];
        this.subscription = this.store
            .select('mainData')
            .subscribe((data: any) => {
                if (data !== null) {
                    this.markers = data.markers.map((mark) => {
                        return {
                            lat: mark.venue.lat,
                            lng: mark.venue.lon,
                            iconPath: this.iconMaker(mark.group, mark.sport),
                            userData: mark,
                            onTap: (marker) => {
                                let urlExt = "/event/" + mark.id; this.routerExtensions.navigate([urlExt]);
                            },
                        }

                    });

                    args.map.addMarkers(this.markers);
                }
            });

当我点击地图标记时，它会导航到显示与地图标记相关的事件数据的第二页(event/:id)。

事件组件

HTML：

<StackLayout *ngFor=" let model of models |async" orientation="vertical">
    <StackLayout orientation="horizontal" style="padding: 3">
        <Label class="h2" textWrap="true" text="Venue: "></Label>
        <Label class="h2" textWrap="true" [text]="model.venue.name"></Label>
    </StackLayout>
...

组件：

  ngOnInit() {
        this.route.params
            .forEach((params) => {
                this.id = +params['id'];
                console.dir("Found match" + this.id);
                if (params['id']) {

使用异步管道将数据发送到 html。在谷歌地图中，​​这很完美，在 mapbox 中它不会触发，直到我尝试导航离开。我还尝试只订阅返回的 Observable 但在 MapBox 中仍然有相同的结果；Html 不等待异步加载正常。

   this.models = this.mapService.getEvent(this.id);
                    });
            }
        });
}

这一切在谷歌地图中都能 100% 完美运行，除非我无法导航回我的地图组件而不会立即崩溃。

我希望两者都能工作。

我确实有很多错误

因为取消链接 rxjs 模块让我相信这可能是一个问题：

02-07 14:29:59.523 24939 24939 W System.err: remove failed: EACCES (Permission denied) : /data/local/tmp/org.nativescript.pickn/sync/tns_modules/rxjs/src/MiscJSDoc.ts
02-07 14:29:59.543  5475  5475 E audit   : type=1400 msg=audit(1486499399.523:327875): avc:  denied  { unlink } for  pid=24939 comm="ivescript.pickn" name="MiscJSDoc.ts" dev="sda17" ino=463318 scontext=u:r:untrusted_app:s0:c512,c768 tcontext=u:object_r:shell_data_file:s0 tclass=file permissive=0
02-07 14:29:59.573 24939 24939 W System.err: remove failed: EACCES (Permission denied) : /data/local/tmp/org.nativescript.pickn/sync/tns_modules/rxjs/src/observable/dom/MiscJSDoc.ts
02-07 14:29:59.593  5475  5475 E audit   : type=1400 msg=audit(1486499399.573:328068): avc:  denied  { unlink } for  pid=24939 comm="ivescript.pickn" name="MiscJSDoc.ts" dev="sda17" ino=463540 scontext=u:r:untrusted_app:s0:c512,c768 tcontext=u:object_r:shell_data_file:s0 tclass=file permissive=0

Answer 1

AFAIK，使用 ngrx，订阅商店可能只在组件中发生一次，而不是每次触发 onMapReady(args) 方法时，可能在您导航回时发生地图 - 首先通过将 console.log 添加到 onMapReady(args) 方法来验证这一点。

从我所看到的（现在）ngrx 订阅属于构造方法，console.log 现在帮助我了解了许多组件的生命周期...:-)

一个建议可能是：

1. 添加一个名为 isMapboxReady 的组件标志
2. 在 onMapReady 方法中切换它
3. 将订阅移出到构造函数中，并在订阅中添加一个检查，在添加标记之前检查 isMapboxReadyflag 是否为真。