如何使用ActivateRoute的查询参数图来启动导航图，反之亦然？

Question

以下是我的路由解析器，路由配置和组件。我正在尝试使用url参数来初始化地图（想象为谷歌地图）-似乎不起作用，因为始终使用默认的lat / lon值，并且从ActivatedRoute检索到的param值为null。

网址：http://localhost:4500?lat=12&lng=14

此外，下一步将是更新路线查询参数以反映地图上的任何平移操作（用户拖动地图并更改中心坐标）

    export class MyComponent {

        lat: number;
        lon: number;

        private map: any;

        constructor(private route: ActivatedRoute, private router: Router) {
            this.route.data.subscribe(data => {
                this.lat = Number(this.route.snapshot.queryParamMap.get('lat')) || 10;
                this.lon = Number(this.route.snapshot.queryParamMap.get('lon')) || 12;
           this.updateUrl();
}

updateUrl() {

    this.router.navigate([], {
        relativeTo: this.route,
        queryParams: {
            lat: this.lat,
            lon: this.lon
        },
        queryParamsHandling: 'preserve',
        // preserve the existing query params in the route
        skipLocationChange: false
    });
}


        public ngOnInit() {
            this.map = new GoogleLikeMap()

            this.map.setCameraGeolocationAndZoom(
                new GeoCoordinates(Number(this.lat), Number(this.lng)),
                14
            );

            this.map.addEventListener('panning', () => {

                this.lat = this.map.geoCenter.lat;
                this.lng = this.map.geoCenter.longitude;

                this.router.navigateByUrl('/?lat=' + this.lat + '&lng=' + this.lng);
            });
        }
    }

[尝试以http：localhost：4500访问我的网址如果网址中还没有默认的lat和lng值，则应在网址中附加默认值。如果这些值已通过浏览器传递到url，则应在该中心点处初始化地图。

Answer 1

我能够通过订阅ActivatedRoute的queryParams来使它正常工作。

 this.route.queryParams.subscribe(params => {
            this.lat = params.lat;
            this.lon = params.lon;
        });