如何使用 Typescript 在查询参数中获取对象？答案

【问题标题】：How to get object in queryparams using Typescript?如何使用 Typescript 在查询参数中获取对象？
【发布时间】：2019-02-14 13:59:25
【问题描述】：

在按钮点击中，我的功能是，

  inviewMockupEvent(data) {
    console.log(data);
    this.router.navigate(['/page-mockup'], { queryParams: { data: data },  skipLocationChange: true });
  }
console.log(data) give the result as {mockup_id: "123", project_id: "456", module_id: "678", release_id: "890", requirement_id: "432", …}

在导航组件中，我得到如下数据，

  ngOnInit() {
    this.activatedRoute.queryParams.subscribe(params => {
      let data = params['data'];
      console.log(data);
      console.log(JSON.stringify(data));
    });

在哪里，

console.log(data) gives output as [object Object]
console.log(JSON.stringify(data)) gives output as "[object Object]"

还有，

console.log(data.mockup_id) gives result undefined

在这里我需要检索对象值，但无法获取它。请帮助我通过查询参数检索数据并使用 typescript ngOnit 获取而不使用 html。

【问题讨论】：

试试console.log(data.mockup_id) ?
@trichetriche，它的价值为undefined，已经尝试过..
那么请提供minimal reproducible example 重现该问题。
（可以使用stackblitz.io）
在你的问题中添加生成的url

标签： javascript angular typescript angular-routing angular4-router

【解决方案1】：

您正在为您的对象添加一个无用的图层。传播它。

this.router.navigate(['/page-mockup'], { queryParams: { ...data },  skipLocationChange: true });

如果要使用数组表示法，请使用数组变量，而不是映射变量。

显示正确的变量。

this.activatedRoute.queryParams.subscribe(params => {
  let data = params;
  console.log(data.mockup_id);
});

Stackblitz

【讨论】：

【解决方案2】：

基于您的 url localhost:80000/#/page-mockup?data=%5Bobject%20Object%5D，原因是 Angular 仅选择 data 键并将值转换为字符串（我想这仅适用于对象值），这就是您得到 [object Object] 的原因/p>

console.log({mockup_id: "123", project_id: "456", module_id: "678", release_id: "890", requirement_id: "432"}.toString());

所以转换这个

this.router.navigate(['/page-mockup'], { queryParams: { data: data },  skipLocationChange: true });

到这里

this.router.navigate(['/page-mockup'], { queryParams: data,  skipLocationChange: true });

【讨论】：

【解决方案3】：

edit(pedido : Pedido, sku:string){
this.router.navigate(['/orders/d/nuevo/editarLinea',this.id, sku, this.llamada],
  {queryParams: {pedido: JSON.stringify(pedido)}}).then(r => 1 ==1);}

并读取对象：

 this.ruta.queryParams.subscribe(params => {
  this.pedidos = JSON.parse(params['pedido']) as Pedido
 });

:-)

【讨论】：