angular 8 получение ActivatedRoute paramMap включает в себя queryParams при загрузке страницы - PullRequest
Новая
       31

angular 8 получение ActivatedRoute paramMap включает в себя queryParams при загрузке страницы

1 голос
/ 28 февраля 2020

Мой фактический компонент и приложение немного сложнее. Тем не менее, я просто хотел посмотреть, есть ли что-то простое, что мне не хватает. Я не могу получить правильную paramMap из ActivatedRoute. Это происходит, когда URL-адрес также содержит queryParams.

пример URL-адреса: www.example.org/event/d162f2c2-5bbe-414c-9961-60ab6f489dc5?blah=foo

В журнале консоли ниже выводится eventId как d162f2c2-5bbe-414c-9961-60ab6f489dc5?blah=foo

Это происходит, только если я откройте ссылку по ссылке за пределами приложения (например, по электронной почте или на другом веб-сайте). Или, если я скопирую и вставлю URL в новом окне браузера. Обновление страницы делает журнал EventId корректно без queryParams. Тем не менее, почему он не работает при начальной загрузке страницы с внешней ссылки? 

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

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.scss']
})
export class LayoutComponent implements OnInit {

  constructor( private route: ActivatedRoute) {}

  ngOnInit() {

    this.route.paramMap
      .subscribe((params: ParamMap) => {
        console.log('eventId', params.get('eventId'));
      });
  }

}

Маршрут по размеру ленивый загруженный модуль. Основной маршрут имеет маршрут, который выглядит следующим образом: 

{
        path: 'videos',
        component: VideosLayoutComponent,
        canActivate: [AuthGuard, CategoriesExistsGuard],
        children: [
            {
                path: '',
                loadChildren: () =>
                    import('../routes/videos/videos.module').then(m => m.VideosModule),
                data: {title: 'Videos Portal'},
            },
        ]
    },

Тогда внутри videos.module это маршрут, в котором определен eventId. VideosDetailComponent - это место, где я пытаюсь получить идентификатор события: 

{
        path: 'detail/:eventId',
        component: VideosDetailComponent,
        canActivate: [],
        data: {title: 'Video Details'},
    },

Это так странно. Если приложение уже загружено, и я копирую, вставляю URL и нажимаю return, чтобы перезагрузить страницу, eventId регистрируется правильно. Это только когда вы открываете новое окно браузера без уже загруженного приложения и копируете вставку URL. EventId не регистрируется правильно.

OMG, я думаю, я понял это. В моем AuthGuard у меня были некоторые логики c, которые использовали router.navigate([redirectUrl]); Однако, поскольку URL содержал queryParams, когда я переключился на router.navigateByUrl(redirectUrl), это заставило его работать правильно.

...