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

Question

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

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

这是我想要改变状态的一个例子(测试a和测试b),但事实证明我必须使用'test 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 param是url的一部分,它仍然会尝试转换为'test'.

Answer 1

只需将inherit = 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锚点以设置所需的行为,另一种解决方案可能是覆盖状态的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;
    });
}])

Answer 2

我有同样的问题,因为参数的默认继承...为了完成前面的答案,JS调用的语法是:

$state.go('new state', {pararemeters... } , {inherit:false});