AngularJS ui 路由器在没有 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 callto 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 参数.对于正在配置的每个参数，添加一个以参数名称为键的配置对象.

查看部分:...或定义额外的非 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 的状态之间传递数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！