如何使用Typescript获取queryparams中的对象？

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

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

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

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

3. 显示正确的变量。

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

闪电战