AngularJS ui路由器在没有URL的状态之间传递数据

Posted 2023-02-19

【中文标题】AngularJS ui路由器在没有URL的状态之间传递数据

【英文标题】：AngularJS ui router passing data between states without URL

【发布时间】：2015-03-30 15:46:51

【问题描述】：

我正面临在两个状态之间传递数据而不暴露 url 中的数据的问题，就像用户不能真正直接登陆这个状态。

例如。 我有两个状态“A”和“B”。 我正在状态“A”中进行一些服务器调用并传递调用的响应 声明“B”。服务器调用的响应是一个字符串消息，很长，所以我不能在 url 中暴露它。

那么 Angular ui 路由器有什么方法可以在状态之间传递数据，而不使用 url 参数？

【参考方案1】：

我们可以使用params，新 UI-Router 的特性：

API Reference / ui.router.state / $stateProvider

params 可选配置 url 中声明的参数，或定义附加的非 url 参数的映射。对于正在配置的每个参数，添加一个配置对象，该对象以参数名称为键。

见部分：“...或定义额外的非url参数...”

所以状态定义为：

$stateProvider
  .state('home', 
    url: "/home",
    templateUrl: 'tpl.html',
    params:  hiddenOne: null, 
  )

doc mentioned above 的例子很少：

// define a parameter's default value
params: 
  param1:  value: "defaultValue" 

// shorthand default values
params: 
  param1: "defaultValue",
  param2: "param2Default"


// param will be array []
params: 
  param1:  array: true 


// handling the default value in url:
params: 
  param1: 
    value: "defaultId",
    squash: true
 
// squash "defaultValue" to "~"
params: 
  param1: 
    value: "defaultValue",
    squash: "~"
   

EXTEND - 工作示例：http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info

以下是状态定义的示例：

 $stateProvider
  .state('home', 
      url: "/home",
      params :  veryLongParamHome: null, ,
      ...
  )
  .state('parent', 
      url: "/parent",
      params :  veryLongParamParent: null, ,
      ...
  )
  .state('parent.child',  
      url: "/child",
      params :  veryLongParamChild: null, ,
      ...
  )

这可能是使用 ui-sref 的调用：

<a ui-sref="home(veryLongParamHome:'Home--f8d218ae-d998-4aa4-94ee-f27144a21238'
  )">home</a>

<a ui-sref="parent( 
    veryLongParamParent:'Parent--2852f22c-dc85-41af-9064-d365bc4fc822'
  )">parent</a>

<a ui-sref="parent.child(
    veryLongParamParent:'Parent--0b2a585f-fcef-4462-b656-544e4575fca5',  
    veryLongParamChild:'Child--f8d218ae-d998-4aa4-94ee-f27144a61238'
  )">parent.child</a>

查看示例here

【讨论】：

按照建议，我尝试在嵌套状态下使用参数（例如 - “/user/profile/contacts”，它给了我一些错误。我需要为父状态定义“参数”吗？还有吗？

似乎没有必要让父母定义参数，感谢您的详细回答。

不幸的是，这不适用于 ui-router 0.2.10，这就是我正在使用的，将版本更改为 0.2.10 时出现此错误 - 错误：状态“家”中的参数无效

@vijaytyagi，你应该升级。简单地说，没有理由继续运行旧版本。据我记得，移动应该很顺利......

$state.go('parent', veryLongParamParent: 123 ); 也可以工作吗？

【参考方案2】：

params 对象包含在 $stateParams 中，但不会成为 url 的一部分。

1) 在路由配置中：

$stateProvider.state('edit_user', 
    url: '/users/:user_id/edit',
    templateUrl: 'views/editUser.html',
    controller: 'editUserCtrl',
    params: 
        paramOne:  objectProperty: "defaultValueOne" ,  //default value
        paramTwo: "defaultValueTwo"
    
);

2) 在控制器中：

.controller('editUserCtrl', function ($stateParams, $scope)        
    $scope.paramOne = $stateParams.paramOne;
    $scope.paramTwo = $stateParams.paramTwo;
);

3A) 从控制器更改状态

$state.go("edit_user", 
    user_id: 1,                
    paramOne:  objectProperty: "test_not_default1" ,
    paramTwo: "from controller"
);

3B) 改变 html 中的状态

<div ui-sref="edit_user( user_id: 3, paramOne:  objectProperty: 'from_html1' , paramTwo: 'fromhtml2' )"></div>

Example Plunker

【讨论】：

谢谢，完美。还注意到如果你想要 $state 和 $stateParams，你只需要注入 $state。 stateParams 对象是 $state 的一个属性：$state.params。

必须告诉第 1 步（提供默认值）才能使其余部分正常工作;-)

感谢您提供的简洁示例。为我工作！ (UI-Router v 1.0.3)