当前位置: 首页 > 面试题库 >

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

钮博裕
2023-03-14
问题内容

我面临着在两个状态之间传递数据而不暴露url中数据的问题,就像用户不能真正直接进入此状态一样。

例如。我有两个状态“ A”和“ B”。我正在状态“ A”进行一些服务器调用,并将调用的响应传递到状态“
B”。服务器调用的响应是一个字符串消息,该消息很长,因此我无法在url中公开它。

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


问题答案:

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

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

params一个映射,可以选择配置在url中声明的参数,或定义其他非URL参数。对于每个要配置的参数,添加一个键入参数名称的配置对象。

参见以下部分:“ …或定义其他非URL参数…

因此状态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

这是状态定义的示例:

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

在这里查看示例



 类似资料:
  • 所以我面临的问题是,当我点击Hover Books组件中的链接进入一个新页面时,我可以在其中呈现图书状态,但当我按下它时,什么也没有发生。我知道错误可能在哪里(路由)。如果你能帮我修好它,我将不胜感激。谢谢

  • 问题内容: 我想在两个兄弟Routes 和之间共享一个共享状态(远程获取客户端列表)。 我想尝试使用“纯” React(无Flux架构)可以走多远。 这个例子 可行,但是我有一个错误:所以,它似乎不喜欢异步道具。 是否可以将异步道具发送到每个路由? 还是可以在父路由(组件)中设置整个状态,然后从每个子路由(和组件)访问此状态? 问题答案: 您可以使用高级组件来提取数据并将数据注入到顶级组件。然后,

  • 问题内容: 我遇到的情况是表单跨越了几页(可能并不理想,但这就是事实)。我想为整个表单提供一个范围,以便您随身携带,以便用户在步骤之间来回移动时很容易记住状态。 所以我需要用非常伪的代码来做: 组 单击一个链接,然后将其路由到新模板(可能使用同一控制器)。 仍应与最后一页上的值相同。 是否以某种方式持久保存示波器的数据是解决此问题的正确方法,还是还有其他方法?您是否甚至可以创建一个在路由之间具有持

  • 反应路由器:链接和路由不传递状态到组件 我正在用React、Redux和React路由器构建一个在线购物应用程序。在主页上,显示所有项目。我希望用户能够点击一个图像,并被带到一个页面,其中包含该项目的项目详细信息。 下面是我如何做到这一点的: 在App.js中,我使用BrowserRouter、Route和Switch进行路由 这看起来很简单,我在网上看到了很多关于这一点的讨论。以下是我已经尝试过

  • 我的Navbar组件有2个子组件。每个组件都有自己的状态。在其组成部分内工作正常的国家。如何更新这两个状态从假到真的同时,当两个功能onclick将被执行? 主组件导航栏 列表菜单组件 汉堡包成分

  • 问题内容: 我打算学习来自许多不同的MV *框架的AngularJS。我喜欢框架,但是在控制器之间传递数据时遇到了麻烦。 假设我有一个带有一些输入(input.html)的屏幕和一个控制器,比方说InputCtrl。 此视图上有一个按钮,可将您带到另一个屏幕,例如,使用控制器ApproveCtrl批准(approve.html)。 此ApproveCtrl需要来自InputCtrl的数据。在较大的