Question

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

这是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是手动设置的，但将来它会使用route params来发出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

离子框架路由在ui.router的基础上工作，然后使用$stateProvider注册应用程序的所有状态。

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

您应该使用$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＆amp;离子 - 访问路线参数

2 个答案: