Как получить текущий компонент, загруженный маршрутизатором (в родительском или дочернем) в Angular?

Question

Предположим, у нас есть угловые маршруты, определенные как:

const routes: Routes = [
    {
        path: '',
        component: HomeComponent
    },
    {
        path: '/user',
        component: UserComponent,
        children: [
            {
                path: 'edit-profile',
                component: EditProfileComponent
            }
        ]
    }
]

Я хочу идентифицировать текущий компонент, загруженный маршрутизатором.

Так что, если пользователь посещает /user/edit-profile, тогда я хочуEditProfileComponent как строка или объект, и если пользователь посещает /, тогда я хочу HomeComponent.

Answer 1

Использование ActivatedRoute Сервис, который предоставляет доступ к информации о маршруте, связанном с компонентом, который загружен в розетку. Затем используйте события маршрутизатора, которые будут срабатывать при каждом изменении маршрута.

constructor(private router: Router, private route: ActivatedRoute) {}
this.router.events.subscribe(event => {
      if(event instanceof NavigationEnd){
      console.log(this.route.component.name);
      }
    })

Пример