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.

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

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

推荐答案

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

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 参数..."

所以状态定义是:

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

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屋！