Angular & Ionic - 获取路由参数

Question

我需要在我的 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 时，我得到一个空对象。

Answer 1

Ionic 框架路由在 ui.router 的基础上工作，然后您使用 $stateProvider.

注册应用程序的所有状态

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

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

$stateParmas 包含有关 URL 中可用参数的所有信息。

Answer 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');
   });
}

Angular & Ionic - 获取路由参数

Angular & Ionic - Access to route parameters

google-maps

angularjs

angularjs-routing

angular-ui-router

ionic-framework