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

Posted 2023-02-19

【中文标题】如何使用 UI-router 将对象传递到状态？

【英文标题】：How to pass an object into a state using UI-router?

【发布时间】：2014-01-05 02:28:28

【问题描述】：

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

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

我想做这样的事情。

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

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

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

【问题讨论】：

ui-router 机制在导航中保留 URL 状态。因此，如果用户刷新页面，他会回到他所在的页面。如果您不想使用此行为，请考虑使用其他机制（控制器/指令中的原始函数等），并使用 cookie/存储临时数据的存储

使用带有 url 的 localStorage 作为数据的关键？

值从何而来？ Ui.router 具有“解析”的概念，用于在转换到请求状态之前将数据加载到范围。类似的还有 onEnter 和 onExit 方法。此外，您可以使用本地存储。

作为@JoshC。提到，听起来您可能想在移动到某个状态之前研究解析数据。 github.com/angular-ui/ui-router/wiki#resolve

查看stackOverlord的回答，了解如何正式做到这一点。

【参考方案1】：

在 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, 名称：'什么' );

'foo' 中的$stateParams 现在是 param1: 'bar', param2: 'baz', param3: id：35，名称：'what'

网址是 /foo/bar?param2=baz。

【讨论】：

也适用于transitionTo。

我一定是做错了什么：-/我在 0.2.13 但如果我尝试通过并反对它会以字符串 [object Object]

的形式出现

@ErichBSchulz 虽然它不包含在此答案中，但使其工作的技巧是在状态的 URL 字符串中包含参数名称并将类型指定为 JSON。前任。 $stateProvider.state('myState', url: '/myState/myParam:json', params: myParam: null,... 请参阅 0.2.13 release notes 和此功能的代码 cmets。

我的 URL 中有一个 id 参数，并且还必须将它添加到 params 对象中。 url: '/mystate/id:[0-9]+', params: id: null, myParam: null , ...

一定有一些黑魔法在起作用——我的整个 json 都在显示 url :(((

【参考方案2】：

这个问题有两个部分

1) 使用不会改变 url 的参数（使用 params 属性）：

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

2) 将对象作为参数传递： 好吧，没有direct way how to do it now,，因为每个参数都转换为字符串（EDIT：从 0.2.13 开始，这不再是真的 - 您可以直接使用对象），但您可以通过创建来解决它你自己的字符串

toParamsJson = JSON.stringify(toStateParams);

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

originalParams = JSON.parse($stateParams.toParamsJson);

【讨论】：

实际上，对于传递对象，这是一个很好的 hack :)

我们可以直接传递对象。检查接受的答案

【参考方案3】：

其实你可以做到的。

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

This is the official documentation about options in state.go

所有内容都在此处进行了描述，正如您所见，这是要完成的方法。

【讨论】：

我试过这个确切的代码，但对象没有被保留。

你不能传递对象，你只能传递单个参数值....你把它作为一个对象，你必须把所有的属性作为不同的 url 参数。 Angular-ui-router 开发人员仍在努力传递整个对象。实际上，Svatopluk Ledl 的人给出了一个很好的解决方案。只需将对象作为一个完整的 json 字符串，然后解析它。 :)

【参考方案4】：

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

ui-sref="myState( myParam: myObject )"

【讨论】：

我们如何在.state中接收这个对象

@Shubham 您将为接收对象的状态配置“参数”，然后使用 $stateParams 检索该对象。有关详细信息，请参阅文档angular-ui.github.io/ui-router/site/#/api/…。

这可行，但页面刷新后无法保留数据。

【参考方案5】：

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));


    )

【参考方案6】：

不，当参数传递给 transitionTo 时，URL 将始终更新。

这发生在state.js:698 中的ui-router。