Угловая маршрутизация на основе условия

0

Я пытаюсь найти способ реализовать угловую маршрутизацию, которая маршрутизируется на основе условия, а не связи, которую пользователь нажимает

route1 → view1 route2 → view2

Чтобы добавить осложнение, само условие оценивается по результату службы. Я извлекаю набор элементов для своего приложения для проверки корзины покупок. Мне нужна корзина покупок для перехода к view1, если количество элементов> 0. И другой маршрут, если он равен 0.

if (itemListService.getItems(). length> 0) → route1

else → route2

И из-за этого возникает сложность в том, что маршрутизация должна ждать, пока результат службы не будет оценен до загрузки соответствующего представления. Другими словами, обещание службы должно быть разрешено.

Я нашел следующее сообщение, в котором кто-то предложил использовать свойство конфигурации "разрешить" внутри маршрутизатора, но это только решает проблему ожидания ответа службы. Я не уверен, удовлетворяет ли оно условием проверки на основе ответа службы.

Перенаправление на определенный маршрут на основе условия

Может кто-то помочь мне с этим? Может ли ui-router реализовать это лучше, чем routeProvider?

Теги:
angularjs-routing

1 ответ

0

Да, это можно легко сделать с помощью ui-router. Например, создайте четыре состояния: состояние панели управления, которое свяжет вас с состоянием распознавателя. При вводе состояния распознавателя на основе ваших данных службы вы можете перенаправить в соответствующее состояние. Это выполняется с помощью привязки OnEnter состояния резольвера.

Демо-плунжер

В плункере,

  1. Нажмите на родителя на панели управления
  2. Он будет перемещаться в состояние child1 до тех пор, пока элементы службы не будут иметь значения
  3. Когда все элементы будут выгружены, он перейдет к состоянию child2

Код:

 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();
    }
  };
}]);

Ещё вопросы

Сообщество Overcoder
Наверх
Меню