如何使用 UI-router 将对象传递到状态?

IT技术 javascript angularjs angular-ui-router
2021-01-23 09:14:31

我希望能够转换到状态并使用 ui-router 传递任意对象。

我知道通常$stateParams使用,但我相信这个值被插入到 URL 中,我不希望用户能够为这些数据添加书签。

我想做这样的事情。

$state.transitionTo('newState', {myObj: {foo: 'bar'}});

function myCtrl($stateParams) {
   console.log($stateParams.myObj); // -> {foo: 'bar'}
};

有没有办法在不将值编码到 URL 中的情况下做到这一点?

6个回答

在 0.2.13 版本中,您应该能够将对象传递到 $state.go,

$state.go('myState', {myParam: {some: 'thing'}})

$stateProvider.state('myState', {
                url: '/myState/{myParam:json}',
                params: {myParam: null}, ...

然后访问控制器中的参数。

$stateParams.myParam //should be {some: 'thing'}

myParam 不会显示在 URL 中。

来源:

请参阅 christopherthielen https://github.com/angular-ui/ui-router/issues/983的评论,为方便起见,转载于此:

christopherthielen:是的,现在应该可以在 0.2.13 中使用了。

.state('foo', { url: '/foo/:param1?param2', params: { param3: null } // null 是默认值 });

$state.go('foo', { param1: 'bar', param2: 'baz', param3: { id: 35, name: 'what' } });

'foo' 中的 $stateParams 现在是 { param1: 'bar', param2: 'baz', param3: { id: 35, name: 'what' } }

url 是 /foo/bar?param2=baz。

我的 URL 中有一个 id 参数,并且必须将其添加到 params 对象中。 { url: '/mystate/{id:[0-9]+}', params: { id: null, myParam: null }, ...
2021-03-21 09:14:31
也适用transitionTo
2021-03-23 09:14:31
我一定是做错了什么:-/我在 0.2.13 但如果我试图通过并反对它在状态中作为字符串出现 [object Object]
2021-03-25 09:14:31
一定有一些黑魔法在起作用 - 我的整个 json 都显示了 url :(((
2021-04-05 09:14:31
@ErichBSchulz 虽然它没有包含在这个答案中,但使这项工作有效的技巧是在状态的 URL 字符串中包含参数名称并将类型指定为 JSON。前任。$stateProvider.state('myState', { url: '/myState/{myParam:json}', params: {myParam: null},...请参阅0.2.13 发行说明和此功能的代码注释。
2021-04-06 09:14:31

这个问题有两个部分

1) 使用不会改变 url 的参数(使用 params 属性):

$stateProvider
    .state('login', {
        params: [
            'toStateName',
            'toParamsJson'
        ],
        templateUrl: 'partials/login/Login.html'
    })

2) 传递一个对象作为参数:嗯,现在没有直接的方法如何做到这一点,因为每个参数都被转换为字符串(编辑:从 0.2.13 开始,这不再是真的 - 你可以直接使用对象),但是您可以通过自己创建字符串来解决它

toParamsJson = JSON.stringify(toStateParams);

并在目标控制器中再次反序列化对象

originalParams = JSON.parse($stateParams.toParamsJson);
实际上对于传递对象来说,这是一个很好的技巧:)
2021-03-21 09:14:31
我们可以直接传递对象。检查接受的答案
2021-03-23 09:14:31

其实你可以这样做。

$state.go("state-name", {param-name: param-value}, {location: false, inherit: false});

这是关于 state.go 中选项的官方文档

一切都在那里描述,正如你所看到的那样。

我尝试了这个确切的代码,但没有保留该对象。
2021-04-02 09:14:31
你不能传递对象,你只能传递单个参数值......你把它作为一个对象你必须把所有的属性作为不同的 url 参数。Angular-ui-router 开发人员仍在致力于传递整个对象。实际上,Svatopluk Ledl 提供了一个很好的解决方案。只需将对象作为一个完整的 json 字符串,然后解析它。:)
2021-04-12 09:14:31

顺便说一句,您还可以在模板中使用 ui-sref 属性来传递对象

ui-sref="myState({ myParam: myObject })"
@Shubham 您将为将接收对象的状态配置“参数”,然后使用 $stateParams 检索该对象。有关详细信息,请参阅文档angular-ui.github.io/ui-router/site/#/api/...。
2021-03-17 09:14:31
我们如何在 .state 中接收这个对象
2021-03-20 09:14:31
这有效,但无法在页面刷新后保留数据。
2021-04-12 09:14:31

1)

$stateProvider
        .state('app.example1', {
                url: '/example',
                views: {
                    'menuContent': {
                        templateUrl: 'templates/example.html',
                        controller: 'ExampleCtrl'
                    }
                }
            })
            .state('app.example2', {
                url: '/example2/:object',
                views: {
                    'menuContent': {
                        templateUrl: 'templates/example2.html',
                        controller: 'Example2Ctrl'
                    }
                }
            })

2)

.controller('ExampleCtrl', function ($state, $scope, UserService) {


        $scope.goExample2 = function (obj) {

            $state.go("app.example2", {object: JSON.stringify(obj)});
        }

    })
    .controller('Example2Ctrl', function ($state, $scope, $stateParams) {

        console.log(JSON.parse($state.params.object));


    })