AngularUI路由器:具有相同url模式的多个状态

Question

嘿所有我遇到什么,我认为将是一个常见的路由问题,但我无法找出一个解决方案.基本上我的页面有两种状态,基本和高级,我希望两种状态的URL模式相同,但只加载当前状态的模板(从控制器内转换到)

config(function ($stateProvider) {

  $stateProvider.state('basic', {
    url: '/:post',
    templateUrl: function (stateParams) {
      return 'post-' + stateParams.post + '-tmpl.html';
    }
  });

  $stateProvider.state('advanced', {
    url: '/:post',
    templateUrl: function (stateParams) {
      return 'post-' + stateParams.post + '-advanced-tmpl.html';
    }
  });
})

controller('myCtrl', function ($state) {
  //
  // In this case, I would expect only the template from
  // the advanced state to load, but both templates are trying
  // to load.
  $state.transitionTo('advanced', {post: 2});
}

我假设导航到匹配的模式会加载给定的状态,这就是为什么当它匹配时,两个模板都会尝试加载.有没有办法完成相同的网址模式,但只使用基于当前状态的不同模板？

Answer 1

假设您不能拥有两个具有相同URL的状态,为什么不同时将这两个状态合并为一个？Ui-router已经允许你有一个自定义函数来返回模板.您只需要添加另一个隐藏的自定义参数(让我们调用它advanced状态声明):

$stateProvider.state('basicOrAdvanced', {
  url: '/:post',
  templateUrl: function (stateParams) {
    if (stateParams.advanced) {
      return 'post-' + stateParams.post + '-advanced-tmpl.html';
    } else {
      return 'post-' + stateParams.post + '-tmpl.html';
    }
  },
  params: {
    advanced: False
  }
});

然后你用它来称呼它:

$state.transitionTo('basicOrAdvanced', {post: 2, advanced: True})

有关嵌套状态和公共控制器的另一种可能解决方案,请参阅ui-router的github页面上的问题#217和#1096.

在那里提出的解决方案创建了第三个状态,其控制器执行调度工作,而您想要登陆的两个状态(basic和advanced)具有空URL:

$stateProvider.state('basicOrAdvanced', {
  url: '/:post',
  controller: function($state, $stateParams) {
    if($stateParams.advanced) {
        $state.go('advanced', {post: $stateParams.post});
    } else {
        $state.go('basic', {post: $stateParams.post});
    }
  },
  params: {
    advanced: False
  }
}

如果您的状态在多个方面与简单方面不同templateUrl(例如,如果它们具有完全独立的控制器等),则此解决方案更好

另请参阅StackOverflow上有关类似问题的另一个问题.