Angular 2 可以沿着路由器传递复杂的对象吗?

2024-03-18

是否可以通过路由器发送复杂的对象? 这是我正在做和尝试做的事情:

在搜索页面中,用户可以单击结果之一上的按钮,该按钮将调用导致该行触发的方法。this.router.navigate(['profile-detail', selection]);

The selection对象在导航之前看起来像这样。

{
  profile: {
    id: number,
    fname: string,
    lname: string
  },
  contact: {
    type: string,
    address: string
  },
  books: [{
    title: string,
    author: string
  }]
}

然而,当我们进入个人资料详细信息页面时,this.route.snapshot.params将此作为实际数据:

{
  profile: "[object Object]",
  contact: "[object Object]",
  books: "[object Object]"
}

不可以,路由器需要将数据序列化到浏览器的URL栏,而URL栏只支持字符串。

您可以使用共享服务在不是父/子或兄弟的组件之间传递对象,也可以像路由器一样动态添加。

也可以看看https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirection-service https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

根据您的具体要求,解析器也可能起作用https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 2 可以沿着路由器传递复杂的对象吗? 的相关文章

  • 使用许多嵌套的 switchMap 是不好的做法吗?

    我有 HTTP 拦截器 在该拦截器中 在更改请求之前 我需要打开一个加载程序 真正让我担心的是我最终会得到很多switchMaps why 加载器是异步的 我还需要将从拦截器传递的消息转换为加载器服务 翻译消息也是异步的 在拦截器中 我应该
  • Angular 6 HTTP 客户端发布 - 错误请求

    我有以下问题 我有一个 API 所在的服务器 我将请求发送到注册端点 但作为响应 我收到 400 错误请求错误 指出必须填写姓名 电子邮件等 问题是它们已经满了 我不再怀念创意了 我的代码 import Component from ang
  • Angular 2打开静态页面

    我有 Angular 2 项目 我想在新窗口中打开服务器上可用的静态帮助文件 我试过window open help index html 它导航到该页面 但抛出有关找不到路线的错误 我也尝试在角度区域外运行上面的代码 但没有什么区别 我怀
  • Angular - 使用 routerlink 将对象传递给 @Input 参数

    我有一个带有 Input 参数的角度分量 如下所示 Component selector app transmission history export class TransmissionHistoryComponent implemen
  • Mat-table 多行内的多行

    我想要的内容如下图所示 我使用 Angular Material 7 x 并使用 Mat Table 实现 如下所述 https material angular io components table overview https mat
  • 将 Angular v12 升级到 v13 时出现“模块未找到”错误

    嗨 开发者和贡献者 我正在努力找出以下错误的问题所在 src app models type ModelType ts 2 0 44 错误 找不到模块 错误 导出字段无法解析目录 请求为 当我将 Angular 版本从 v12 升级到 v1
  • 传单 - 导入 Geojson - Angular 6

    我尝试将 GeoJson 文件导入到 Angular 的应用程序 6 中的传单中 通过这个解决方案 我的 geojson 是在 leafletmap 中绘制的 但我有这个错误 我无法构建我的应用程序 有人知道一种解决方案吗 错误 TS234
  • Angular 2 组件:子对子通信

    我的 Angular 2 应用程序中有三个组件 C0 C1 和 C2 第一个 C0 表示一个 html 模板 具有多个子组件 ui 元素 现在 如果有人点击C1 中的按钮 菜单 我怎样才能通知C2 日历 关于那件事 我尝试了一些例子组件通讯
  • 如何安装旧版本的 Angular?

    我需要安装 Angular 2 但是当我运行时 ng new myApp版本是4 我搜索了很多 但找不到只安装版本2的方法 有谁知道该怎么做 Edit the command ng new MYAPP ng4 false It does n
  • 如何按顺序使用 RxJS 可观察量?

    事情是这样的 我有一个 HTTP get 请求 它返回一个 JSON 对象列表 我使用 RxJS 订阅接收该列表的数据 现在 对于该列表中的每个对象 我想执行另一个 HTTP 请求 然后将该请求的结果放入数组中 到目前为止 我已经能够做到这
  • AOT 编译器 - 包括延迟加载的外部模块

    我试图将外部模块 托管在 git npm 存储库中 作为延迟加载模块包含在我的 Angular 应用程序中 我正在使用 ngc 编译器编译我的外部模块 node modules bin ngc p tsconfig aot json 这是我
  • Angular 7 向原语添加扩展方法

    我想向原语添加一些方法 我有以下文件 字符串扩展 ts interface String isNullOrEmpty this string boolean String prototype isNullOrEmpty function t
  • Angular 5,如何检测用户不活动

    除了使用 IdleJS 和 ngDoCheck 之外 我们如何在 Angular 5 中检测用户的不活动状态 Thanks 你可以尝试用这个 export class AppComponent userActivity userInacti
  • 将路由参数从父路由传递到子路由

    我的路线结构如下 parent id child child 我可以通过以下方式从父组件获取参数吗 ngOnInit this route params subscribe params gt this id params id 然后将其作
  • For-each 在 ionic2 和 angularjs2 中

    我用 IONIC 2 Beta 版本制作了一个应用程序 我想用for each环形 是否可以在 Angular V2 中使用每个 Thanks 首先在Component 您必须声明要显示的数组 import Component from a
  • 如何重启ngOnInit来更新Interpolation

    有办法重新启动吗ngOnInit 改变变量时 因为我想重新开始ngOnInit 改变时theme多变的 这是我的代码 设置 ts export class SettingsPage implements OnInit phraseColor
  • 捕获 Angular 2 异常

    如果 Angular 2 遇到内部异常 则不会将其记录到控制台 我怎样才能检测到像下面这样的异常 EXCEPTION Error during instantiation of MainFormComponent ORIGINAL EXCE
  • 反应式形式的 NgbDatepicker:设置初始值

    这可能是我一段时间以来处理过的最令人沮丧的问题之一 一般来说 日期 尤其是 NgbDatepicker 在 Angular 中处理起来有点麻烦 我正在 Angular 8 中针对反应 式表单实现 NgbDatepicker 我的问题的要点是
  • Angular 6 更新 - 未找到 rxjs-5-to-6-migrate 命令

    在升级过程中从更新 angular io https update angular io 使用 rxjs tslint 自动更新规则删除已弃用的 RxJS 6 功能 对于大多数应用程序 这意味着运行以下两个命令 npm install g
  • Angular2 http.post 被执行两次

    我遇到一个奇怪的问题 Angular2 的 RC1 Http 服务执行 http post 调用两次 我已经调试了我的应用程序 并且我知道这不是点击事件问题 导致核心服务调用的所有调用 public create json Object p

随机推荐

  • 在运行 .NET 4 的 IIS 7 上找不到默认角色提供程序

    大家早上好 我正在尝试在我的 Web 应用程序中实现自定义成员身份和角色提供程序 这些应用程序是在 IIS 7 实例的默认网站下实现的 我的 Web 应用程序在 NET 4 应用程序池下运行 但是 设置相应的web config后 出现以下
  • 使用 C# 组合两个相对路径

    将相对路径附加到绝对路径 有很多欺骗 但我需要添加相对路径 e g Path1 Parent Child a txt Path2 Sibling file cs Result Parent Sibling file cs Tried Dir
  • Java:计算二项式系数

    我有以下程序计算两个整数的二项式系数 但我想更改程序 它只计算并保存解决方案所需的系数 问题是我现在真的不知道该怎么做 The Code https i stack imgur com 6TUDE jpg public static lon
  • jdk10中外部jar包放在哪里

    我一直在 JDK8 中将外部 jar 放入 jre lib ext 中 但是 当我将jdk更新到jdk10时 我在jdk目录中找不到jre子目录 所以我从Oracle下载了jre10 结果发现ext目录丢失了 我应该把这些外部jar放在哪里
  • C++ 和 C 中的命名空间

    并不是说我会ever在我的专业工作中编写如下代码 以下代码在c 和c中是合法的并且编译时没有警告 include
  • UITextField 仅在顶部或底部具有圆角半径

    我有一个UITextField已添加到视图中 我正在尝试更改它的默认外观 我想要的是改变圆角半径 但仅限于顶部 底部 我这样做是这样做的 UIBezierPath usernameMaskPathWithRadiusTop UIBezier
  • 在 LISP 中使用“ash”执行二分查找?

    所以 我现在正在阅读 Land of Lisp 事实证明 Lisp 与我见过的其他编程语言有很大不同 无论如何 本书提供了一些我们要输入到 CLISP REPL 中的代码 defparameter small 1 defparameter
  • 如何解决心跳时间超过“00:00:01”失败的问题?

    我有一个执行 HTTP POST 的 NetCore C 项目 该项目是在 Kubernetes 中设置的 我注意到以下日志 Heartbeat took longer than 00 00 01 at 02 22 2020 15 43 4
  • 无法运行我的程序

    尝试制作我的第一个程序 基本智力游戏 每次我尝试运行它时都没有显示任何内容 并且不知道出了什么问题 希望您能给我一些帮助或建议 顺便说一句 我在 Java 编程方面几乎是菜鸟 所以请轻松地评论 这是代码 import java util i
  • MySQL 索引 - 根据此表和查询,最佳实践是什么

    我有这张表 500 000 行 CREATE TABLE IF NOT EXISTS listings id int 10 unsigned NOT NULL AUTO INCREMENT type tinyint 1 NOT NULL D
  • 使用 MySQL C++ 连接器解决未定义的引用

    我正在尝试编译它 也在 mysql c 连接器文档中列出 http pastebin com HLv4zR0r http pastebin com HLv4zR0r 但我收到这些错误 http pastebin com 3t0UbeFy h
  • Keras 对隐藏层定义的澄清

    我正在遵循有关在 Keras 中构建简单深度神经网络的教程 提供的代码是 create model model Sequential model add Dense 12 input dim 8 activation relu model
  • “安全”DLL 注入

    抱歉 这不是一个很好的问题 我有一个程序 当从资源管理器打开文件时需要发出警报 即调用 ShellExecute A W 不幸的是 微软删除了允许您在 Vista 及更高版本中挂钩这些事件的 COM 接口 IShellExecuteHook
  • 将 numpy 数组保存为具有自定义颜色的单通道 png

    我有一个整数 numpy 数组 表示具有很少值 大约 2 5 的图像 我想将其保存为 png 文件 并为每个值提供自定义颜色 我正在尝试这样 import numpy as np from PIL import Image array np
  • 设置 body onload 而不使用 标签

    我正在尝试在身体加载后触发一个功能 我知道你可以从 body 标签中执行此操作 但如果可能的话 我更愿意从 JS 中执行此操作 例如 document getElementsByTagName body onload someFunc 这对
  • 就 Android 上的路径而言,多用户功能如何工作?

    背景 从 4 2 版本开始 Android 支持多用户 链接here http developer android com about versions android 4 2 html MultipleUsers and here htt
  • 矩阵 int mat[5][5] 与 int ** 相同吗? [复制]

    这个问题在这里已经有答案了 简单的一维数组被视为指针 但矩阵也是如此吗 然而 一个立方体int 5 5 5 也将被视为int 不 指向整数的指针与整数数组的数组不同 想想它们在记忆中会是什么样子 数组的数组 例如int a 2 2 a 0
  • 从另一个窗口(类)调用方法问题

    在 WPF 应用程序主窗口的代码隐藏文件中 我有一个使用 LINQ to SQL 查询数据库并将结果写入 ObservableCollection 的方法 public void GetStateByDate string shcode M
  • 实体框架代码优先属性与流畅的 API 配置相结合

    我可以将代码优先属性与 Entity Framework 中的实体的 Fluent API 配置结合使用吗 谢谢 是的你可以 我通常更喜欢定义一些约束 例如 通过使用来创建所需的属性 Required 或通过使用定义字符串属性的长度Stri
  • Angular 2 可以沿着路由器传递复杂的对象吗?

    是否可以通过路由器发送复杂的对象 这是我正在做和尝试做的事情 在搜索页面中 用户可以单击结果之一上的按钮 该按钮将调用导致该行触发的方法 this router navigate profile detail selection The s