Угловые сухари с динамической этикеткой

Question

Я хочу создать навигацию по крошке с помощью динамической крошки. Примерно так:

Главная страница> Категория A> Подкатегория 1> XYZ

Где «Категория A» и «Подкатегория 1» являются статическими, а «XYZ» - динамическими. Эта динамическая метка существует только после инициализации соответствующего компонента, поскольку содержимое загружается с удаленного сервера. Иерархия исходит из конфигурации маршрутизатора, где у маршрутов есть дочерние элементы.

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

Моя смутная идея состоит в том, чтобы позволить компонентам реализовать интерфейс, подобный этому:

interface Named {
  readonly name: Observable<string>
}

... и каким-то образом подписаться на этот Observable, но для этого мне нужен экземпляр компонента!

Как получить вычисленную строку из компонента, отображаемого в данный момент в RouterOutlet?

Answer 1

Попробуйте использовать маршрутизатор и маршрут:

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

и:

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

затем:

router.events.forEach(event => {
  if (event instanceof NavigationEnd) {
    // access all route data here
    this.route = route;
  }
});