angularjs - 使用 ui-router 更改状态时如何删除先前提供的可选参数

Question

我有一个带有可选查询参数的状态。我认为它工作正常，但我发现一旦我指定了可选参数，它就会从那时起保留，因为我导航到与其他参数相同的状态，除非显式删除可选参数。

有没有办法确保可选参数在状态更改之间删除？

这是我想要如何更改状态的示例(测试 a 和测试 b)，但事实证明我必须使用“测试 d”版本，因为如果之前已使用过可选参数，则保留该参数。

<a ui-sref="test({req: 'a'})">test a</a><br/>
<a ui-sref="test({req: 'b'})">test b</a><br/>
<a ui-sref="test({req: 'c', opt: 'here'})">test c and opt</a><br/>
<a ui-sref="test({req: 'd', opt: undefined})">test d and explicity without opt</a>

这与我的状态配置方式类似:

        $stateProvider.state('test', {
            url: '/{req}?opt',
            params: {
                opt: {value: null, squash: true}
            },
            template: '<h1>req = {{req}}</h1>' +
                    '<h1>opt = {{opt}}</h1>',
            controller: function($scope, $stateParams) {
                $scope.req = $stateParams.req; 
                $scope.opt = $stateParams.opt;
            }
        })

这是一个jsfiddle 。单击前两个链接，它会按预期工作，但是一旦单击第三个链接，然后单击返回前两个链接中的任何一个，您将看到可选参数被保留，即使在前两个链接。

我希望不必显式重置可选参数，并让它实际工作，就像可选参数一样。

有什么想法吗？这就是它的设计工作方式吗？如果是这样，有没有办法让它按照我想要的方式工作？或者我发现了一个错误？

更新

根据以下答案之一，保留可选参数似乎是“按设计”的。但是，如果可能的话，我仍在寻找有效的解决方法。我从应用程序中的很多地方转换到该状态，其中 99% 都没有指定可选参数。我宁愿不必修改所有这些转换并让它们了解可选参数，而是仅在需要时指定可选参数的 1%。

我尝试创建两个状态“test”和一个子“test.opt”，然后正常过渡到“test”(即“test a”和“test b”)，并且仅过渡到“test” .opt”当我指定可选参数时。但是，我有一个剩余调用的解析，它需要知道是否设置了 opt 参数，因此这不起作用，因为解析无法从子级访问“opt”。

更新#2

我还尝试复制“test”状态，命名为“testopt”，在这种情况下，唯一的区别是 ?opt 参数。然而，显然 ui-router 无法区分仅通过查询参数不同的两个 url，因此即使 opt 参数是 url 的一部分，它仍然会尝试转换为“test”。

Answer 1

只需将继承 = false 的 ui-sref-opts 选项添加到您的链接即可:

<a ui-sref="test({req: 'a'})" ui-sref-opts="{inherit: false}">test a</a><br/>
<a ui-sref="test({req: 'b'})" ui-sref-opts="{inherit: false}">test b</a><br/>
<a ui-sref="test({req: 'c', opt: 'here'})" ui-sref-opts="{inherit: false}">test c and opt</a><br/>
<a ui-sref="test({req: 'd', opt: undefined})" ui-sref-opts="{inherit: false}">test d and explicity without opt</a>

记录此功能请求和实现的线程:https://github.com/angular-ui/ui-router/issues/376

---- 编辑 ----

由于上述解决方案似乎并不理想，因为它还需要更新(和维护)每个 ui-sref anchor 以设置所需的行为，因此另一种解决方案可能是覆盖状态的 go(.. .) 方法将inherit 选项默认设置为 false。虽然我不确定这是否是推荐的模式，但要做到这一点，请将您的 .config 更改为以下内容:

.config(['$stateProvider', '$provide', function ($stateProvider, $provide) {
    $stateProvider.state('test', {
        url: '/{req}?opt',
        params: {
            opt: {value: null, squash: true}
        },
        template: '<h1>req = {{req}}</h1>' +
            '<h1>opt = {{opt}}</h1>',
        controller: function($scope, $stateParams) {
            $scope.req = $stateParams.req; 
            $scope.opt = $stateParams.opt;
        }
    });

    $provide.decorator('$state', function ($delegate) {
        var state = $delegate;

        state.baseGo = state.go;

        var go = function (to, params, options) {
            options = options || {};

            if (angular.isUndefined(options.inherit)) {
                options.inherit = false;
            }

            this.baseGo(to, params, options);
        };

        state.go = go;
        return $delegate;
    });
}])