Angular 2 路由器无法处理传递的多个参数

2024-04-26

我创建了一个示例 Plunker,将多个参数传递到下一页,但它不起作用。这是 Plunker 演示,其中单击项目后危机中心路由不起作用。

http://plnkr.co/edit/ngNSsKBzAuhaP0EjKVJX?p=preview http://plnkr.co/edit/ngNSsKBzAuhaP0EjKVJX?p=preview

 onSelect(crisis: Crisis) {
    // Navigate with Absolute link
    //this.router.navigate(['/crisis-center', 1]); //this is working.
     this.router.navigate(['/crisis-center', { id: '1', id2:'2'}]); //this is not working
    }

//以下是路线:

//{ path: 'crisis-center/:id', component: CrisisDetailComponent } //-- this is working
  { path: 'crisis-center/:id /:id2', component: CrisisDetailComponent}, // this is not working

ngOnInit() {
    this.sub = this.route
      .params
      .subscribe(params => {
        let id = +params['id'];
        let id2 = +params['id2']; //Unable to read id and id2 values
        this.service.getCrisis(id)
          .then(crisis => {
            if (crisis) {
              this.editName = crisis.name;
              this.crisis = crisis;
            } else { // id not found
              this.gotoCrises();
            }
          });
      });
  }

我有三层导航,从危机中心移动到危机详细信息,然后从危机详细信息 -> 交易详细信息。因此,在导航到危机详细信息后,我想传递 CrisisId 和 CrisisdetailId 以遍历回详细信息,然后返回危机列表。

我试图在这里传递多个参数。

另外,我想隐藏浏览器 URL 中的 URL 参数并显示别名,以前使用的“as”关键字现在不起作用。


使用 Router 组件(来自'@角度/路由器',不是来自'@角度/路由器已弃用'),您可以按如下方式传递多个参数:

this.router.navigate(['/crisis-center', 1, 2]);

你试图这样做:

this.router.navigate(['/crisis-center', { id: '1', id2:'2'}]); //this is not working

因为您已传递一个对象作为第二个参数,所以您传递的是查询参数而不是路由器参数。所以,它的 URL 是:

localhost:3000/crisis-center;id=1&id2=2

你可以在这里读更多关于它的内容:https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters

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

Angular 2 路由器无法处理传递的多个参数 的相关文章

随机推荐

  • 如何与多个 ViewModel 共享多个 ObservableCollections?

    我正在编写一个有 4 个视图的程序 公司视图 会员查看 周视图 and 报告查看 每个都有对应的ViewModel和Model 我使用 PRISM BindableBase 来创建 ViewModel 数据绑定正确 公司视图模型包含一个对象
  • 如何使用 gliderlabs/alpine:3.3 在 Dockerfile 中设置时区

    我的 Dockerfile 是 FROM gliderlabs alpine 3 3 RUN set x buildDeps python dev py pip build base apk update add python py lxm
  • WPF 将“菜单”键称为什么?

    我正在查看此处定义的键 http msdn microsoft com en us library system windows input key aspx http msdn microsoft com en us library sy
  • javascript - 将字符串与正则表达式数组进行匹配

    JavaScript 中有没有一种方法可以获取字符串与正则表达式数组的匹配的布尔值 示例如下 其中 if 语句代表我想要实现的目标 var thisExpressions something something else and somet
  • Ruby:检查字符串是否可以转换为整数[重复]

    这个问题在这里已经有答案了 可能的重复 使用 Ruby 测试字符串是否基本上是引号中的整数 https stackoverflow com questions 1235863 test if a string is basically an
  • Vim NerdCommenter:在 vimrc 中添加新文件类型

    有没有办法在 vimrc 中为 NerdCommenter 定义新的文件类型注释 它已经可以工作了 但是如果我可以将其直接放入 vimrc 中 备份配置会更容易 Thanks NERDCommenter 能够解析commentstring选
  • 为什么我的 git 自动更新 Expect 脚本不起作用?

    我想制作一个脚本来更新我所有的 GitHub 存储库 我只需要输入我的用户名和密码 脚本将遍历存储库列表 调用git push并通过补充 Expect 脚本提供必要的信息 这是我的 bash 脚本 bin bash echo Updatin
  • 释放保留视图的最佳实践?

    这是释放保留的视图的正确 最好 方法吗 viewDidLoad 在 iOS 4 x 或更低版本中 还有什么需要考虑的吗 void viewDidUnload super viewDidUnload self releaseViews voi
  • VSTS 构建已过期

    我创建了一个拉取请求 它触发构建并且构建成功 但一段时间后我的构建状态更改为 构建已过期 因此要完成拉取请求 我需要再次触发它 所以问题是 为什么会发生这种情况以及如何避免构建过期 构建过期 是分支机构政策的一个特点 设置构建到期时间 以确
  • 是否可以将 scipy CSR 矩阵的 dtype 转换为 NPY_FLOAT?

    我有一个 scipy CSR 矩阵 它是由 COO 矩阵构建的 如下所示 coord mat coo matrix data row col dtype np float64 它被用作具有底层 C 实现的库的输入 我相信我的矩阵的 dtyp
  • Mysql AVG 忽略零

    我需要对一列执行平均值 但我知道该列中的大多数值都为零 在所有可能的行中 只有两行可能具有正值 我如何告诉 mySQL 忽略零并仅平均实际值 假设您可能不想完全排除此类行 也许它们在您想要聚合的其他列中具有值 SELECT AVG NULL
  • 在 html 文档中,使用高度和宽度标签调整图像大小是一种不好的做法吗?

    如果我有一个徽标图像 并且我想在另一个需要较小尺寸的页面上使用它 我的直觉是创建一个新图像 并使用图形编辑器调整大小 但是 我听说如果我参考原始图像并通过更改图像标签中的高度和宽度来使用浏览器调整其大小 对用户来说会更好 所以我问大家 这里
  • XDocument.Save() 无法访问文件

    希望我能够得到一些帮助来解决一个令人恼火的问题 我似乎无法在任何地方找到明确的答案 我使用 XDocument 对象将数据附加到 xml 文档 然后使用 xDoc save path 覆盖现有文件 但由于某种原因 我第一次运行代码时会抛出错
  • Grails 与 MongoDB、对象 id 和脚手架

    我使用集成测试和 Grails 脚手架将数据写入 mongoDB 数据库时遇到问题 当尝试从 列表 类型页面中选择域实例时 我收到错误 未找到 id null 的 域名 我确信这是因为 Grails url controller actio
  • XML 站点地图从 url 标记中删除 xmlns

    我正在使用下面的行来生成站点地图 但谷歌说有一个错误 我知道错误 但我无法弄清楚如何删除标签 THe code using System Xml Linq Layout null var urls new List
  • 从霍夫线中选择线

    I m using Hough Lines to do corner detection for this image i plan to find the intersection of the lines as the corner T
  • Java 中的生命游戏,人口过剩但不明白为什么

    这是家庭作业 我在底部添加了相关代码 Problem 在试图允许用户调整网格大小时 网格现在被绘制得严重过度填充 截图 人口过剩 https i stack imgur com 0Ilrq png https i stack imgur c
  • 使我的循环每 x 分钟后运行一次的函数

    我想要一个 r 函数 它使我的循环每 5 分钟运行一次 我有一个从谷歌财经下载市场数据的循环 我希望这个循环每 30 分钟运行一次 是否可以 使脚本循环的另一种方法是 使用外部作业调度工具在所需的时间间隔内调用脚本 如果你有linux 我建
  • R 中已知固定截距的线性回归

    我想使用 R 中的 lm 函数计算线性回归 此外 我想获得回归的斜率 其中我明确给出截距lm 我在互联网上找到了一个例子 我尝试阅读 R help lm 不幸的是我无法理解它 但我没有成功 谁能告诉我我的错误在哪里 lin lt data
  • Angular 2 路由器无法处理传递的多个参数

    我创建了一个示例 Plunker 将多个参数传递到下一页 但它不起作用 这是 Plunker 演示 其中单击项目后危机中心路由不起作用 http plnkr co edit ngNSsKBzAuhaP0EjKVJX p preview ht