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

2022-01-21 00:00:00 angularjs javascript angular-ui-router

大家好，我遇到了我认为常见的路由问题，但我无法找到解决方案.基本上我的页面有两种状态，基本和高级，我希望两种状态的 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 的关于类似问题的问题.

相关文章