Невозможно прочитать параметры строки запроса из App.Component - PullRequest
Новая
       8

Невозможно прочитать параметры строки запроса из App.Component

0 голосов
/ 22 января 2019

Я хотел бы централизовать, где / как я читаю конкретный параметр строки запроса во всем приложении, поэтому я решил, что лучшее место для этого было бы в app.component.ts 

export class AppComponent implements OnInit, OnDestroy {
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute) {
  }

Затем, на ngOnInit(), я смотрю снимок, а также различные подписки: 

  ngOnInit(): void {
    console.log('AppComponent - ngOnInit() -- Snapshot Params: ' + this.activatedRoute.snapshot.params['code']);
    console.log('AppComponent - ngOnInit() -- Snapshot Query Params: ' + this.activatedRoute.snapshot.queryParams['code']);
    console.log('AppComponent - ngOnInit() -- Snapshot Query ParamMap: ' + this.activatedRoute.snapshot.queryParamMap.get('code'));

    this.activatedRouteParamsSubscription = this.activatedRoute.params.subscribe(params => {
      console.log('AppComponent - ngOnInit() -- Subscription Params: ' + params['code']);
    });

    this.activatedRouteQueryParamsSubscription = this.activatedRoute.queryParams.subscribe(params => {
      console.log('AppComponent - ngOnInit() -- Subscription Query Params: ' + params['code']);
    });

    this.activatedRoute.queryParamMap.subscribe(queryParams  => {
      console.log('AppComponent - ngOnInit() -- Subscription Query ParamMap: ' + queryParams.get('code'));
    });

    this.routerEventsSubscription = this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        console.log('AppComponent - ngOnInit() -- Subscription NavigationEnd: URL=', event.url);
      }
    });
  }

Как видите, я настроил подписку на params, queryParams, queryParamMap и router.events.

Единственное, что запускается между переходами по страницам, - это router.events, но там мне придется вручную проанализировать URL, чтобы получить строку запроса.

Не уверен, влияет ли это на это, но я переопределяю стратегию повторного использования маршрута, поэтому страница перезагружается, даже если она находится на том же маршруте: 

export class AppRoutingModule {
  constructor(private router: Router) {
    this.router.routeReuseStrategy.shouldReuseRoute = function() {
        return false;
    };
  }
}

Вывод корневой страницы при первом посещении: 

AppComponent - constructor() -- Snapshot Params: undefined
AppComponent - constructor() -- Snapshot Query Params: undefined
AppComponent - ngOnInit() -- Snapshot Params: undefined
AppComponent - ngOnInit() -- Snapshot Query Params: undefined
AppComponent - ngOnInit() -- Snapshot Query ParamMap: null
AppComponent - ngOnInit() -- Subscription Params: undefined
AppComponent - ngOnInit() -- Subscription Query Params: undefined
AppComponent - ngOnInit() -- Subscription Query ParamMap: null
AppComponent - ngOnInit() -- Subscription NavigationEnd: URL= /?code=logged-out

1024 * РЕШЕНИЕ *

Как указали @Thomaz и @Nathan, моя проблема заключалась в том, что App.Component не было внутри router-outlet.

Кроме того, @ Натан также отметил, что:

Вы можете получать доступ к событиям маршрутизатора и перебирать их в любом месте хотя в приложении, именно поэтому ваш router.events.subscribe (...) триггеры.

Затем я включил трассировку на своих маршрутах: 

RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload', enableTracing: true })

И увидел, что событие ActivationEnd включает snapshot, который имеет queryParams. В конце я подписываюсь на событие маршрутизатора и обрабатываю значение строки запроса, если событие ActivationEnd. 

this.router.events.subscribe(event => {
      if(event instanceof ActivationEnd) {
        const code = event.snapshot.queryParams['code'];
        if (code) {
          // handle it...
        }
      }
}

1 Ответ

0 голосов
/ 23 января 2019
На

ActivatedRoute можно подписаться на компоненты, загруженные через router-outlet.Поскольку AppComponent не загружается через какую-либо розетку, вы не можете подписаться на ActivatedRoute параметры внутри него.Стратегия повторного использования не влияет на это.

Из документов https://angular.io/api/router/ActivatedRoute известно следующее:

[ActivatedRoute] Содержит информацию о маршруте, связанном скомпонент загружен в розетку.

Нет розетки, загружаемой AppComponent, поэтому ваши подписки не будут срабатывать.Вы можете получать доступ к событиям маршрутизатора и перебирать их в любом месте приложения, поэтому ваши router.events.subscribe(...) срабатывают.

...