AngularUI 路由器:具有相同 url 模式的多个状态 [英] AngularUI Router: multiple states with same url pattern

问题描述

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

Hey all I'm running into what I thought would be a common routing problem, but I'm unable to figure out a solution. Basically my page has two states, basic and advanced, and I want the URL patterns to be the same for both states but only load the template for the current state at the time (which is transitioned to from within a 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 模式?

I assume that navigating to the matched pattern loads the given state which is why when it matches, both templates attempt to load. Is there some way to accomplish the same url pattern but with different templates based only on the current state?

推荐答案

假设你不能有两个状态相同的 URL，你为什么不继续将这两个状态合二为一呢?Ui-router 已经允许你有一个自定义函数来返回模板.您只需要在状态声明中添加另一个隐藏的自定义参数(我们称之为 advanced):

Assuming that you cannot have two states with the same URL, why don't you go along and merge the two states into one? Ui-router already allows you to have a custom function to return the template. You just need to add another, hidden custom parameter (let's call it advanced) to the state declaration:

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

<小时>

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

---

For another possible solution with nested states and a common controller, see issues #217 and #1096 on ui-router's github page.

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

The solution presented there creates a third state whose controller does the dispatching work, whereas the two states you want to land in (basic and advanced) have empty URLs:

$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(例如，如果它们具有完全独立的控制器等)，则此解决方案更好

This solution is better if your states differ in more aspects than the simple templateUrl (e.g. if they have completely separate controllers, etc.)

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

这篇关于AngularUI 路由器:具有相同 url 模式的多个状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！