Получить путь к маршрутизатору в NavigationStart of on going navigation angular 8

Question

Как получить путь к маршрутизатору в событии NavigationStart в angular 8

    this.router.events
      .pipe(filter(event => event instanceof NavigationStart))
      .subscribe((event: NavigationStart) => {
         // how to get router path of on going navigation
      });

Я мог бы использовать event.url, но в моем приложении есть некоторые из именованных выходов, URL-адрес смешан с открытым именованным выходом. поэтому ищу путь к маршрутизатору текущей навигации на NavigationStart.

Answer 1

Ввести службы Router и ActivatedRoute.

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

Вы можете использовать следующий код в качестве начального точка.

this.router.events
    .pipe(
        filter(event => event instanceof NavigationStart),
        map(() => this.activatedRoute),
        map(activatedRoute => {
            while (activatedRoute.firstChild !== null) {
                activatedRoute = activatedRoute.firstChild
            }

            return activatedRoute
        }),
        filter(activatedRoute => activatedRoute.outlet === "primary"),
        mergeMap(activatedRoute => activatedRoute.url),
    )

Примечание: Этот код будет работать, даже если вы напишете его в своем компоненте root. Активированный маршрут не только обозначает маршрут для конкретного компонента, который его ввел. Активированный маршрут представляет собой все дерево маршрутов, которое привело к вашему текущему маршруту.

В вашем root компоненте активированный маршрут является ссылкой на маршрут, который активировал компонент, то есть «/». Однако вы можете перемещаться вниз по дереву маршрутов, чтобы посетить другие маршруты (если они есть).

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

Answer 2

Используйте ActivatedRoute вместо Router

Вы можете подписаться на url observable и присоединиться к сегментам или использовать snapshot. Это хорошо документировано здесь.

https://angular.io/api/router/ActivatedRoute#properties