角UI路由器状态之间传递数据，而不网址 [英] Angular ui router passing data between states without URL

问题描述

我现在面临传递两个国家之间的数据，而不在URL中暴露数据的这个问题，就好像用户真的不能直接降落在这个状态。

I am facing this problem of passing data between two states without exposing the data in the url, it's like user cannot really directly land on this state.

例如。
我有两个国家A和B。
我做的国家A部分服务器的呼叫，并通过呼叫的响应
国家B。服务器调用的响应是一个字符串的消息，这是相当长的，所以我不能暴露在URL中。

For example. I have two states "A" and "B". I am doing some server call in state "A" and passing the response of the call to state "B". The response of the server call is a string message, which is quite long, so i cannot expose that in the url.

那么，有没有在角UI路由器的方式来传递国家之间的数据，而无需使用网址参数？

So is there any way in angular ui router to pass data between states, without using url params ?

推荐答案

我们可以使用 PARAMS ，新的的用户界面，路由器的功能：

We can use params, new feature of the UI-Router:

API参考/ ui.router.state / $ stateProvider

PARAMS 任选配置在url中声明的参数，或者定义了其他非网址参数的地图。对于被配置成每个参数，添加键控参数的名称的配置对象

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.

请参阅部分： ...或定义了其他非URL参数...

所以国家DEF是：

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

几个例子上面形成 DOC >：

// 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: "~"
  } }

扩展 - 工作的例子：<一href=\"http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info\">http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info

EXTEND - working example: http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info

下面是一个国家定义的例子：

Here is an example of a state definition:

 $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是一个电话：

This could be a call using 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>

在这里检查的例子

这篇关于角UI路由器状态之间传递数据，而不网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！