Как получить объект в queryparams используя 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

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

Stackblitz

Answer 2

Основываясь на вашем 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 });