javascript - AngularUI 路由器 : multiple states with same url pattern

Question

嘿，我遇到了一个我认为是常见的路由问题，但我无法找出解决方案。基本上我的页面有两种状态，基本状态和高级状态，我希望两种状态的 URL 模式相同，但当时只加载当前状态的模板(从 Controller 内部转换到)

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

我假设导航到匹配的模式会加载给定的状态，这就是为什么当它匹配时，两个模板都会尝试加载。是否有某种方法可以实现相同的 url 模式，但仅基于当前状态使用不同的模板？

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})

---

有关嵌套状态和公共(public) Controller 的另一种可能解决方案，请参阅问题 #217和 #1096在 ui-router 的 github 页面上。

此处提供的解决方案创建了第三个状态，其 Controller 执行调度工作，而您想要进入的两个状态(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(例如，如果它们具有完全独立的 Controller 等)，则此解决方案更好

---

另见 another question on StackOverflow about a similar issue .