javascript - 在 ui-router 中，使用不同参数链接到相同状态不会执行任何操作

Question

我有一个菜单，其中有多个链接，所有链接都使用相同的 ui-router 状态。

因此它们都有不同的参数和不同的 URL。

所有这些链接在不同状态下单击时都有效。

一旦您单击其中一个并进入“范围”状态，但现在所有链接都不起作用。

HTML:

<a ui-sref="range({type: 'foo'})" class="dropdown-item text">
    Product Foo
</a>
<a ui-sref="range({type: 'bar'})" class="dropdown-item text">
    Product Bar
</a>

状态定义:

var _range = [ 'foo', 'bar' ];

  module.config([ '$stateProvider', function($stateProvider) {
    var rangeState = {
      parent: 'layout',
      url: '/{type:' + _range.join('|') + '}-doors',
      data: {
        range: _range
      },
      views: {
        'main@': {
          templateUrl: 'doors/range/range.html',
          controller: 'rangeController'
        }
      },
      resolve: {
        range: [ '$stateParams', 'rangeResource', function($stateParams, rangeResource) {
          return rangeResource.query({ range: $stateParams.type }).then(function(range) {
            range.name = $stateParams.type;
            return range;
          });
        }]
      }
    };

    $stateProvider.state('range', rangeState);
  }]);

任何人都可以帮我弄清楚这不起作用吗？

要查看实际效果，请访问 https://uat.yaledoor.co.uk然后从“门样式”下拉菜单中选择左侧的链接。第一次它将带您进入该页面。随后点击同一下拉列表中的其他链接将无法执行任何操作。

Answer 1

如果您使用具有不同参数的相同状态，您的状态将适用于重新加载选项。

试试这个:

$stateProvider.state('range', rangeState, {reload: true});