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

发布时间：2020-12-17 09:13:58 所属栏目：安全来源：网络整理

导读：我面临这种在两个状态之间传递数据的问题，而不暴露URL中的数据，这就像用户不能真正直接着陆这个状态。例如。我有两个状态“A”和“B”。我在状态“A”做一些服务器调用，并传递调用的响应到状态“B”。服务器调用的响应是一个字符串消息，这是相当长的

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

例如。
我有两个状态“A”和“B”。
我在状态“A”做一些服务器调用，并传递调用的响应
到状态“B”。服务器调用的响应是一个字符串消息，这是相当长的，所以我不能暴露在url。

所以有什么办法在角ui路由器在状态之间传递数据，而不使用url参数？

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

API Reference / ui.router.state / $stateProvider

params A map which optionally configures parameters declared in the url,or defines additional non-url parameters. For each parameter being configured,add a configuration object keyed to the name of the parameter.

请参阅部分：“…或定义其他非网址参数…”

所以状态def将是：

$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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!