(Angular 5+) Получение данных из дочерних маршрутов

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

export const appRoutes: Routes = [
    { path: 'home', component: HomeComponent },    
    {path: 'help', component: HelpComponent },
    {
        path: 'admin',
        component: AdminComponent,
        runGuardsAndResolvers: 'always',
        data: { title: "Admin"},
        canActivate: [AuthGuard],
        children: [
            {
                path: 'organisation', 
                component: ListOrganizationComponent, 
                data:{title: "Organisation"}, 
                resolve: {organizations: ListOrganizationResolver}
            }        
        ]
    },
    { path: '**', redirectTo: 'home', pathMatch: 'full' },
];

export class AdminComponent implements OnInit {
    title: string = "";
    constructor(private route: ActivatedRoute) { }

    ngOnInit() {
      this.title = this.route.snapshot.data.title;
    }
}

Когда я запускаю код и перехожу к: localhost:4200/admin/organisation отображается только заголовок от администратора (title = "Admin"). Я хочу получить название "Организация" из дочернего маршрута .. как это сделать? И есть ли простой способ сделать хлебную крошку в angular?

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
0
1 070
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Что касается вашего второго вопроса, я использовал ngx-breadcrumbs, который легко настраивается, и вам не нужно ничего делать из коробки.

npm --save install ngx-breadcrumbs

Ответ принят как подходящий

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

export class AdminComponent implements OnInit {
  breadcrumb: string;

  ngOnInit() {
    let breadcrumb = this.route.snapshot.data['title'];

    if (this.route.snapshot.firstChild) {
        breadcrumb += ' > ' + this.route.snapshot.firstChild.data['title'];
    }

    this.breadcrumb = breadcrumb;
  }

  constructor(private route: ActivatedRoute) {}
}

Вот рабочая демонстрация. Обязательно перейдите к /admin/organization.

По вашему второму вопросу вы можете попробовать ngx-панировочные сухари в качестве другого упомянутого ответа.

Другие вопросы по теме