AngularJS ui路由器在没有URL的状态之间传递数据 [英] AngularJS 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.

那么在不使用url参数的情况下，角度ui路由器有什么方法可以在状态之间传递数据?

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

推荐答案

我们可以使用UI路由器的params， new 功能:

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

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

params一个映射，可以选择配置在url中声明的参数，或定义其他非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参数... "

See the part: "...or defines additional non-url parameters..."

因此状态def为:

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

文档中的几个示例上面提到的:

// 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

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>

在此处

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