Angular .queryParams.subscribe всегда возвращает undefined

Question

Я пытался найти разницу между .snapshot и .queryParam в angular для того же самого, что я создал демонстрацию с кодом компонента следующим образом:

import { Component, OnInit } from '@angular/core';
import{ActivatedRoute,ParamMap, Router} from '@angular/router'

@Component({
  selector: 'app-routing-eg',
  templateUrl: './routing-eg.component.html',
  styleUrls: ['./routing-eg.component.css']
})
export class RoutingEgComponent implements OnInit {

  constructor(private _route : ActivatedRoute,private router:Router) { }

  ngOnInit(): void {
    const id =   this._route.snapshot.paramMap.get('id');
    let par:any;
    this._route.queryParams.subscribe((params) =>{
        par = params['id'];
    })
    console.log('id' + id)
    console.log('par' + par)
    this.router.navigate(['routed/:2'])
    console.log('id 2 ' + id)
    console.log('par 2' + par)
  }

}

результат, который я получаю для выше код:

id1
parundefined
id 2 1
par 2undefined

Где я могу ошибиться, если я получаю undefined, когда использую подписку

Answer 1

const id = this._route.snapshot.paramMap.get('id');

Я думаю, вы пытаетесь получить params, а не queryParams.

Вам следует подписаться на params. И переместите свой console.log для переменной par внутри подписки, потому что он асинхронный.

this._route.params.subscribe((params) => {
  par = params['id'];
  console.log('par' + par);
});
this.router.navigate(['routed/:2']);

Answer 2

Переменная par назначается асинхронно. Таким образом, любые операторы, которые напрямую зависят от его нового состояния, должны находиться внутри подписки. Поскольку к тому времени, когда вы его регистрируете, ему еще не присвоены никакие значения.

  ngOnInit(): void {
    const id =   this._route.snapshot.paramMap.get('id');
    let par:any;
    this._route.queryParams.subscribe((params) =>{
        par = params['id'];
        console.log('par' + par)
        this.router.navigate(['routed/:2'])
        console.log('par 2' + par)
    })
    console.log('id' + id)
    console.log('id 2 ' + id)
  }

С приведенными выше операторами вы можете заметить, что журналы id печатаются перед журналами par . Подробнее об асинхронных данных здесь .