Nativescript 导航、ngrx 和地图（google、MapBox）有 subscriber/navigation 个问题

Question

编辑：看来我的变更检测和生命周期在导航到另一个组件后完全中断了。为什么？

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

我都试过了，在我尝试导航之前它们都运行良好；

使用 google 个地图：

在我尝试再次导航 back/forward 到地图之前，导航和订阅其他页面中的数据工作正常。我总是在 google 地图的 onReady 方法上出错。

使用 MapBox：

导航工作正常，包括返回地图。但是，在我导航回原始地图组件之前，我的异步管道无法实际填充其他页面数据！！！我假设订阅者在导航时不会被触发。如果我不使用 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。在 google 地图中这很完美，在 mapbox 中它不会触发，直到我尝试导航离开。我还尝试只订阅返回的 Observable，但在 MapBox 中的结果仍然相同；Html 不等待异步加载正常。

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

这一切在 google 地图中都 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) 方法时，可能发生当您导航回地图时 - 首先通过向 onMapReady(args) 方法添加 console.log 来验证这一点。

据我所见（现在）ngrx 订阅属于构造函数方法，console.log 帮助我现在理解了众多组件的 life-cycle...:-)

一个建议可能是：

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

Nativescript 导航、ngrx 和地图（google、MapBox）有 subscriber/navigation 个问题

Nativescript navigation, ngrx, and maps(google, MapBox) having subscriber/navigation issues

google-maps

mapbox

nativescript

ngrx

angular