Angular & Ionic - 获取路由参数
Angular & Ionic - Access to route parameters
我需要在我的 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
时,我得到一个空对象。
Ionic 框架路由在 ui.router
的基础上工作,然后您使用 $stateProvider
.
注册应用程序的所有状态
ngRoute
是创建基于路由的 SPA 的另一种方法,当时 $routeParams
服务用于获取从 URL.[=17 传递的参数值=]
您应该使用 $stateParams
而不是 $routeParams
$stateParmas
包含有关 URL 中可用参数的所有信息。
要访问 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');
});
}
我需要在我的 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
时,我得到一个空对象。
Ionic 框架路由在 ui.router
的基础上工作,然后您使用 $stateProvider
.
ngRoute
是创建基于路由的 SPA 的另一种方法,当时 $routeParams
服务用于获取从 URL.[=17 传递的参数值=]
您应该使用 $stateParams
而不是 $routeParams
$stateParmas
包含有关 URL 中可用参数的所有信息。
要访问 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');
});
}