如何使用 Typescript 获取查询参数中的对象？

Question

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

  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

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

Answer 1

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

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 });

Answer 2

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

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

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

显示正确的变量。

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

Stackblitz

Answer 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
 });

:-)

如何使用 Typescript 获取查询参数中的对象？

How to get object in queryparams using Typescript?

javascript

angular

typescript

angular-routing

angular4-router