Angular2, получить данные маршрута с URL-адреса, отобразить панировочные сухари

Ответ 1

До сих пор наиболее выполнимое решение (сделано):

• Сделать маршруты экспортированными/импортируемыми
• Получить текущее обновление URL-адреса от router.events подписаться
• При изменении URL-кода на пути маршрутов посмотрите, соответствует ли шаблон URL-адресу
• Если patter соответствует URL-адресу, получите данные из соответствующего маршрута

Плюсы: работает

Минусы: повторное использование идентификатора маршрута URL-адреса без использования маршрутизатора ng2.

Ответ 2

Обновлено для RC5

Вместо того, чтобы начинать с текущего URL-адреса и пытаться получить маршруты из URL-адреса, вы можете получить все активированные маршруты (связанные с первичным выходом) из RouterState:

После завершения каждого успешного жизненного цикла навигации маршрутизатор создает дерево ActivatedRoute, которое формирует текущее состояние маршрутизатора. Мы можем получить доступ к текущему RouterState из любого места в нашем приложении, используя сервис Router и свойство routerState.

Состояние маршрутизатора предоставляет нам методы для обхода дерева маршрутов вверх и вниз по любому активированному маршруту для получения информации, которая может нам понадобиться из родительских, дочерних и дочерних маршрутов. - ссылка

Подпишитесь на события маршрутизатора, затем, после каждого события NavigationEnd, проходите по дереву ActivatedRoute из root:

import { Component } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import 'rxjs/add/operator/filter';

@Component({
  selector: 'breadcrumbs',
  template: '
  <div>
    breadcrumbs: 
    <span *ngFor="let breadcrumb of breadcrumbs; let last = last">
      <a [routerLink]="breadcrumb.url">{{breadcrumb.label}}</a>
      <span *ngIf="!last">></span>
    </span>
  </div>'
})
export class BreadcrumbsComponent {
  breadcrumbs: Array<Object>;
  constructor(private router:Router, private route:ActivatedRoute) {}
  ngOnInit() {
    this.router.events
      .filter(event => event instanceof NavigationEnd)
      .subscribe(event => {  // note, we don't use event
        this.breadcrumbs = [];
        let currentRoute = this.route.root,
            url = '';
        do {
          let childrenRoutes = currentRoute.children;
          currentRoute = null;
          childrenRoutes.forEach(route => {
            if(route.outlet === 'primary') {
              let routeSnapshot = route.snapshot;
              console.log('snapshot:', routeSnapshot)
              url += '/' + routeSnapshot.url.map(segment => segment.path).join('/');
              this.breadcrumbs.push({ 
                label: route.snapshot.data.breadcrumb,
                url:   url });
              currentRoute = route;
            }
          })
        } while(currentRoute);
      })
  }
}

Маршруты выглядят так:

{ path: '', component: HomeComponent, data: {breadcrumb: 'home'}}

Plunker - RC.5, маршрутизатор 3.0.0-rc.1

См. Также fooobar.com/questions/252263/... для аналогичного решения.

Ответ 3

Любое решение для крошки должно обрабатывать -

1. декларативный подход определения хлебных крошек в прикладной маршрутизации.
2. динамический асинхронный способ обновления любого маршрута с меткой из ответа сервера.
3. способ пропустить определенные маршруты от отображения в сухарях.

Я создал библиотеку Angular для обработки всего этого, которая называется xng-breadcrumbs - https://github.com/udayvunnam/xng-breadcrumb

не стесняйтесь проверять, приложение Angular разработало показ использования хлебных крошек - https://xng-breadcrumb.netlify.com

Планирование, создание и непрерывный выпуск угловой библиотеки хорошо описаны в этой средней статье