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

Я использую angular2 роутер.

Чтобы нарисовать кусок URL-адреса, скажем, site.com/a/b/c/15, я делаю следующее:

  • Получить маршрут site.com/a/b/c/15 и получить красивое имя, связанное с маршрутом
  • Получить маршрут site.com/a/b/c и получить красивое имя, связанное с маршрутом
  • Получить маршрут site.com/a/b и получить красивое имя, связанное с маршрутом
  • Получить маршрут site.com/a и получить красивое имя, связанное с маршрутом

Итак, скажем, у меня есть следующие маршруты:

{ path: 'a', component: A, data:{prettyName: 'I am A'}}
{ path: 'b', component: B, data:{prettyName: 'I am B'}},
{ path: 'c', component: C, data:{prettyName: 'I am C'}},

Результатом моего процесса будет массив, содержащий {"I am C", "I am B", "I am C"}, и благодаря этому я могу отобразить красивую палитру "I am A > I am B > I am C", которая объясняет текущий маршрут.

Это использование для работы с устаревшим маршрутизатором

this.router.recognize(url).then((instruction) => {
    instruction.component.routeData.get('prettyName') // Would return 'I am ..'

Однако сейчас; с последним маршрутизатором я больше не могу обработать эту распознающую логику.

Как получить данные маршрута, связанные с 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

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