Angular 和 Ionic - 访问路由参数答案

【问题标题】：Angular & Ionic - Access to route parametersAngular 和 Ionic - 访问路由参数
【发布时间】：2016-02-16 20:34:35
【问题描述】：

我需要在我的 Ionic 应用程序中获取路由参数。

这是app.js 文件（配置部分）：

.config(function ($stateProvider, $urlRouterProvider) {
        $stateProvider

            .state('categorylist', {
                url: '/',
                templateUrl: 'views/category_list.html'
            })
            .state('category/single',{
                url: '/maps/:category',
                templateUrl: 'views/mappa.html'
            })

        // if none of the above states are matched, use this as the fallback
        $urlRouterProvider.otherwise('/');
    })

这是一个控制器，它应该获取路由参数并显示带有一些标记的地图，该标记将从在线 json 中获取。
在本节中，我获取当前用户位置并在地图上创建一些标记。

目前locations 是手动设置的，但将来它将使用路由参数来发出 API GET 请求。

如何访问该参数？

.controller('MapsCtrl', function ($scope, $routeParams, $cordovaGeolocation, $ionicPlatform, $ionicLoading) {

        $ionicPlatform.ready(onDeviceReady);

        console.log($routeParams);


        function onDeviceReady() {

            // Mostro la finestra di caricamento
            $ionicLoading.show({
                template: '<ion-spinner icon="bubbles"></ion-spinner><br/>Acquiring location!'
            });

            var posOptions = {
                enableHighAccuracy: true,
                timeout: 50000,
                maximumAge: 0
            };

            var locations = [
                [1, 'Servizio 1', xxxxxxx, xxxxxxxx, 'Address'],
                [2, 'Servizio 2', xxxxxxx, xxxxxxxx, 'Address']
            ];

            // Recupero la posizione dellutente
            $cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) {

                var lat = position.coords.latitude;
                var long = position.coords.longitude;

                // Imposto le coordinate
                var myLatlng = new google.maps.LatLng(lat, long);

                // Impostazioni mappa
                var mapOptions = {
                    center: myLatlng,
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControlOptions: {
                        mapTypeIds: []
                    }
                };

                // Creo la mappa
                var map = new google.maps.Map(document.getElementById("map"), mapOptions);

                // Creo il marker con la posizione corrente dell'utente
                var marker;
                marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    animation: google.maps.Animation.DROP
                });

                marker.setMap(map);


                var infowindow = new google.maps.InfoWindow();

                var marker, i;

                // Imposto sulla mappa tutti i servizi trovati
                for (i = 0; i < locations.length; i++) {
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][2], locations[i][3]),
                        map: map
                    });

                    google.maps.event.addListener(marker, 'click', (function (marker, i) {
                        return function () {

                            var popupContent = "<h1>" + locations[i][1] + "</h1>" +
                                "<p>" + locations[i][4] + "</p>";

                            infowindow.setContent(popupContent);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
                }

                $scope.map = map;
                $scope.elencoServizi = locations;
                $ionicLoading.hide();

                console.log($routeParams);

            }, function (err) {
                $ionicLoading.hide();
                console.log(err);
            });
        }
    });

我已经包含了ngRoute，但是当我尝试打印出$routeParams 时，我得到了一个空对象。

【问题讨论】：

标签： angularjs google-maps ionic-framework angular-ui-router angularjs-routing

【解决方案1】：

Ionic 框架路由基于ui.router 工作，然后你使用$stateProvider 注册应用程序的所有状态。

ngRoute 是另一种创建基于路由的 SPA 的方法，当时$routeParams 服务用于获取从 URL 传递的参数值。

您应该使用$stateParams 而不是$routeParams

$stateParmas 拥有 URL 中可用参数的所有信息。

【讨论】：

【解决方案2】：

要访问 xyz/id1/id2 等链接中的参数，请在 xyz.page.ts 文件中使用以下内容-

import { ActivatedRoute, Router} from '@angular/router';

..
constructor(private route : ActivatedRoute, private router : Router){}

ngOnInit() {
   this.route.paramMap.subscribe(params => {
      let id1 = params.get('id1');
      let id2 = params.get('id2');
   });
}

【讨论】：