Как получить параметр запроса из снимка ActivatedRoute в компоненте приложения в Angular?

Question

Я хочу получить параметр запроса в моем app.component синхронно, без использования queryParamMap наблюдаемого *1003*.По этой причине я использую снимок маршрута следующим образом:

const param = this.route.snapshot.queryParamMap.get('param');

Это работает в дочерних компонентах, но, похоже, не работает в app.component.Вот вам StackBlitz .

В чем причина и как мне достичь желаемого результата?

Answer 1

Дело в том, что вы получаете доступ к снимку маршрута.Который является нулевым в то время, когда компонент приложения проходит фазу инициализации.

Если ваш дочерний компонент создан, а маршрутизация уже состоялась, снимок может дать вам правильный queryParam после навигации.Но, например, если вы находитесь внутри диплинка и пытаетесь обновить страницу, снимок, вероятно, также будет нулевым, даже в вашем дочернем компоненте.

Чтобы получить доступ к routeParam, как только он появится, вам потребуетсяна самом деле подписаться на queryParamMap или queryParams.Что-то вроде:

this.route.queryParamMap.pipe(map((paramMap: ParamMap) => {
      return paramMap.get('param');
    }), distinctUntilChanged()).subscribe(val => {
      this.param = val;
      // having changedetection.onPush activated you would need to call the 
      // cdR.markAsChecked() here
    })

Может быть, это поможет: Угловой маршрутизатор: понимание состояния маршрутизатора