Как получить имя компонента и параметры в событии NavigationEnd?

Question

Мы внедряем Google Analytics. Мы хотели бы получить URL, параметры и компоненты, чтобы пометить их в GA.

 this.router.events
      .pipe(
        filter(event => event instanceof NavigationEnd)
      )
      .subscribe((event: NavigationEnd) => {
        event.urlAfterRedirects;
      });

Например, переход к / tab / brands / 12 / details / 55

/tab/brands/:BrandId/details/:productId

Мы могли бы найти URL-адрес, но не имя компонента или параметры. Есть идеи?

Answer 1

Вы используете события маршрутизатора только для определения окончания навигации. Если у вас есть это, вам больше не нужно событие маршрутизатора. Вместо этого вам нужно запросить активированный маршрут. Из этого вы можете получить компонент и любые параметры, которые вам понадобятся sh.

component.ts

constructor(private router: Router,
  private route: ActivatedRoute
) {
}

ngOnInit(): void {
  this.router.events.pipe(
    // identify navigation end
    filter((event) => event instanceof NavigationEnd),
    // now query the activated route
    map(() => this.rootRoute(this.route)),
    filter((route: ActivatedRoute) => route.outlet === 'primary'),
  ).subscribe((route: ActivatedRoute) => {
    console.log(route.snapshot.paramMap.get('id'));
    console.log(route.component);
  });
}

private rootRoute(route: ActivatedRoute): ActivatedRoute {
  while (route.firstChild) {
    route = route.firstChild;
  }
  return route;
}

DEMO: https://stackblitz.com/edit/router-template-svttzv