Angular 7 возможно ли получить компонент по его маршруту?

Question

Я использую событие NavigationEnd для обнаружения текущего маршрута после его изменения следующим образом:

this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event) => {
      const navObject = event as NavigationEnd;
      console.log(navObject.url);
    });

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

 if (... `instanceof UserComponent`) { ...do somethig user related }

Возможно ли это?

Answer 1

Я бы предложил добавить данные в конфигурацию вашего маршрута и использовать эти данные, чтобы определить, какой это компонент,

пример:

{ path: '/user ', component: UserComponent, data: { source: 'user' } // <--- unique signature for your component }

изатем получить эти данные, используя ActivatedRoute,

Другим примером будет

Проверка через ActivatedRoute напрямую

пример: constructor(private activatedRoute: ActivatedRoute) { if (this.activatedRoute.snapshot.component instanceof UserComponent) { // do something } }

ссылка: https://angular.io/api/router/ActivatedRoute#component

Answer 2

Попробуйте,

this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
).subscribe((event) => {
    let root = this.router.routerState.snapshot.root;
    while (root) {
        if (root.children && root.children.length) {
            root = root.children[0];
        } else  {
            console.log(root.component);
            return;
        }
    }
});

даст имя компонента.

Answer 3

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

<router-outlet (activate)='onActivate($event)'></router-outlet>

И далее в компоненте:

onActivate(event) { if (event instanceOf UserComponent) {doAnything()} }