Угловая крошка, основанная на истории навигации вместо пути маршрута - PullRequest
Новая
       40

Угловая крошка, основанная на истории навигации вместо пути маршрута

1 голос
/ 21 июня 2019

Есть ли способ реализовать хлебную крошку, основанную на истории навигации, вместо обычной хлебной крошки на основе маршрута?

пример Маршрут: Домой - HChild1 - HChild1.1 Домой - HChild2 - HChild2.1

Если пользователь переходит к HChild2.1 с домашней страницы, то должна быть «Домашняя страница» - «Домой» |HChild2.1

вместо дома |HChild2 |HChild2.1

Тогда, если пользователь перейдет к HChild1.1 из HChild2.1, то хлебные крошки должны быть Home |HChild2.1 |HChild1.1

вместо дома |HChild1.1 |HChild1.1

то, что у меня есть, это обычная схема маршрута, основанная на крошке, которая не служит моей цели, поскольку я могу только перемещаться к компоненту paranet, но не к предыдущему компоненту.

Спасибо

1 Ответ

0 голосов
/ 21 июня 2019

Использование компонента «хлебные крошки» для заполнения последнего маршрута в конце маршрута навигации.

маршрут должен иметь данные крошки 

//Home route
{ 
  path: '',
  component: HomeComponent,
  data: {breadcrumb:'Home'},
}

Вот компонент крошки, который я сделал. 

export interface BreadCrumb {
  label: string;
  url: string;
};

@Component({
  selector: 'breadcrumb',
  template: `<span *ngFor="let breadcrumb of breadcrumbs" >
    <a [routerLink]="breadcrumb.url">
      {{ breadcrumb.label }}
    </a>|
  </span>`
})
export class BreadCrumbComponent {
  private history = [];
  breadcrumbs: BreadCrumb[] = [];
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
  ) { }

  public ngOnInit(): void {
    this.router.events
      .pipe(filter(event => event instanceof NavigationEnd), distinctUntilChanged(),map(() => {
        return this.buildBreadCrumb(this.activatedRoute.root)
      }
      ))
      .subscribe(event => {
        this.breadcrumbs.push(event);
        console.log(this.breadcrumbs)
      });
  }
  buildBreadCrumb(route: ActivatedRoute, url: string = ''): BreadCrumb {
    const label = route.routeConfig ? route.routeConfig.data['breadcrumb'] : 'Home';
    const path = route.routeConfig ? `/${route.routeConfig.path}` : '';

    const nextUrl = `${url}${path}`;
    const breadcrumb = {
      label: label,
      url: nextUrl
    };

    if (route.firstChild) {
      return this.buildBreadCrumb(route.firstChild, nextUrl);
    }
    return breadcrumb;
  }
}
...