Модуль Angular Router ActivatedRoute возвращает null firstChild, если он существует

Следуя одному из превосходных руководств Тодда Мотто (https://toddmotto.com/dynamic-page-titles-angular-2-router-events) Я столкнулся с ситуацией, которую не могу объяснить.

Вот код:

this.router.events
    .filter((event) => event instanceof NavigationStart)
    .map(() => this.activatedRoute)
    .map((route) => {
        console.log('route pre-while: ', route); // Shows ActivatedRoute object
        console.log('pre-while route child: ', route.firstChild); // null
        while (route.firstChild) {
          console.log('while route: ', route);
          route = route.firstChild;
        }
        console.log('post while route: ', route);
        return route;
      })
    .subscribe((elem) => {
        console.log('elem: ', elem);
    });

В этом блоке кода оператор журнала route pre-while показывает объект ActivatedRoute в консоли Chrome. Если я разверну объект в окне консоли Chrome, я могу щелкнуть атрибут firstChild и увидеть другой объект ActivatedRoute, как я и ожидал. Однако проблема в том, что второй оператор журнала «pre-while route child» выводит null на консоль. Кроме того, цикл WHILE никогда не выполняется, потому что route.firstChild оценивается как null. Кто-нибудь может объяснить мне, почему это??? Почему я могу зарегистрировать объект и увидеть firstChild, но сразу же получить null при попытке доступа к нему?


angular angular-routing angular-router
person Michael D Johnson    schedule 23.01.2018    source источник
comment
мой плохой, я видел, что вы удалили его для меня.   -  person Michael D Johnson    schedule 24.01.2018
comment
Не беспокойтесь, просто хотел убедиться, что вы поняли, почему.   -  person Aluan Haddad    schedule 24.01.2018

Ответы (2)


arrow_upward
4
arrow_downward

Спасибо, что задали вопрос и нашли решение самостоятельно.

для людей, которые приземлятся здесь в будущем, это будет рабочим решением.

import { Router, NavigationEnd } from '@angular/router';

.
.

constructor(
        ...
        private route: ActivatedRoute) {
    }

.
.

this.router.events
    .filter((event) => event instanceof NavigationEnd)
    .map(() => this.activatedRoute)
    .map((route) => {
        console.log('route pre-while: ', route); // Shows ActivatedRoute object
        console.log('pre-while route child: ', route.firstChild); // null
        while (route.firstChild) {
          console.log('while route: ', route);
          route = route.firstChild; // Conditional if needed in scenario
        }
        console.log('post while route: ', route);
        return route;
      })
    .subscribe((elem) => {
        console.log('elem: ', elem);
    });

person Khateeb321    schedule 27.12.2018
comment
При попытке сделать это с помощью Angular 10 tslint говорит: «Фильтр» свойства не существует для типа «Observable‹Event›» - person Leif Segen; 11.02.2021

arrow_upward
3
arrow_downward

Итак, получается, что фактическое событие маршрутизатора имеет значение. Перехват события NavigationStart не дает достаточно времени для заполнения объекта ActivatedRoute. Это слишком рано. Перехват на NavigationEnd, кажется, является билетом, поскольку к тому времени вся оценка и загрузка маршрутов были выполнены.

person Michael D Johnson    schedule 23.01.2018