Question

我一直试图找到一种方法来实现角度路由，该路由根据条件而不是用户点击的链接进行路由

route1 - ＆gt;厂景 route2 - ＆gt;视图2

要添加复杂性，将根据服务结果评估条件本身。我正在检索购物车结帐应用程序的一组项目。如果商品数量> 1，我需要购物车路由到view1。 0.如果它是0，则为不同的路径。

if（itemListService.getItems（）。length＆gt; 0） - ＆gt; ROUTE1

其他 - ＆gt;路径2

正因为如此，出现的复杂情况是路由必须等到服务结果被评估才能加载相应的视图。换句话说，必须解决服务的承诺。

我发现以下帖子有人建议使用＆＃39; resolve＆＃39; routeprovider中的配置属性，但这只解决了等待服务响应的问题。我不确定它是否满足基于服务响应检查条件。

Redirecting to a certain route based on condition

有人可以帮我吗？ ui-router能否比routeProvider更好地实现它？

Answer 1

是的，可以使用ui-router轻松完成。例如，创建四种状态：仪表板状态，它将您链接到解析器状态。根据您的服务数据进入解析器状态，您可以重定向到适当的状态。这是在解析器状态的 OnEnter 钩子的帮助下完成的。

Demo Plunker

在plunker中，

点击信息中心中的父级
它将导航到状态child1，直到服务中的项具有值
当弹出所有项目时，它将导航到状态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();
    }
  };
}]);

基于条件的角度路由

1 个答案: