Я пытаюсь найти способ реализовать угловую маршрутизацию, которая маршрутизируется на основе условия, а не связи, которую пользователь нажимает
route1 → view1 route2 → view2
Чтобы добавить осложнение, само условие оценивается по результату службы. Я извлекаю набор элементов для своего приложения для проверки корзины покупок. Мне нужна корзина покупок для перехода к view1, если количество элементов> 0. И другой маршрут, если он равен 0.
if (itemListService.getItems(). length> 0) → route1
else → route2
И из-за этого возникает сложность в том, что маршрутизация должна ждать, пока результат службы не будет оценен до загрузки соответствующего представления. Другими словами, обещание службы должно быть разрешено.
Я нашел следующее сообщение, в котором кто-то предложил использовать свойство конфигурации "разрешить" внутри маршрутизатора, но это только решает проблему ожидания ответа службы. Я не уверен, удовлетворяет ли оно условием проверки на основе ответа службы.
Перенаправление на определенный маршрут на основе условия
Может кто-то помочь мне с этим? Может ли ui-router реализовать это лучше, чем routeProvider?
Да, это можно легко сделать с помощью ui-router. Например, создайте четыре состояния: состояние панели управления, которое свяжет вас с состоянием распознавателя. При вводе состояния распознавателя на основе ваших данных службы вы можете перенаправить в соответствующее состояние. Это выполняется с помощью привязки OnEnter состояния резольвера.
В плункере,
Код:
var myapp = angular.module('myapp', ["ui.router"]);
myapp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/dashboard")
$stateProvider
.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard.html'
}).state('parent', {
url: '/parent',
resolve: {
stateToGo: function(service) {
if (service.getItems().length > 0) {
return 'child1';
} else {
return 'child2';
}
}
},
onEnter: function(stateToGo, $state) {
$state.go(stateToGo);
}
})
.state('child1', {
templateUrl: 'child1.html',
resolve: {
service: function(service) {
return service;
}
},
controller: function($scope, service) {
console.log(service.getItems());
service.removeItem();
console.log(service.getItems());
}
}).state('child2', {
templateUrl: 'child2.html'
});
});
myapp.factory('service', [function() {
var items = [1, 2];
return {
getItems: function() {
return items;
},
removeItem: function() {
items.pop();
}
};
}]);