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

Question

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

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").Я хочу получить название Организация от дочернего маршрута .. как это сделать?И есть ли простой способ сделать панировочные сухари в угловых?

Answer 1

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

Answer 2

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

npm --save install ngx-breadcrumbs