Я хочу сделать для своего приложения хлебную крошку, поэтому я добавляю заголовок к своим маршрутам данных, как этот:
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?





Вы можете использовать свойство Первый ребенок в своем 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-панировочные сухари в качестве другого упомянутого ответа.