Как реализовать навигацию по крошке в Angular 4

Question

Я хочу реализовать навигацию Breadcrumb со следующим меню

Главная страница> Решения> Результаты> Контакт

В настоящее время я использую следующий код маршрутизации

  import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';

    import { SolutionComponent } from "./solutions.component";
    import { ResultComponent } from "./result/result.component";
    import { ContactComponent } from './contact/contact.component';


    const routes: Routes = [
        {
            path: 'home/solutions',
            component: SolutionsComponent
        },
        {
            path: 'home/solutions/result',
            component:ResultComponent
        },
        {
            path: 'home/solutions/result/contact',
            component: ContactComponent
        }
];
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

Может кто-нибудь предложить образец плунжера для реализации навигации по крошке в ANgular 4

Я создал частичный рабочий поршень https://plnkr.co/edit/iGLJ06zRVYWDYedAtsDW?p=preview

Спасибо

Answer 1

setBreadcrumb() {
    this.router.events.subscribe((val) => {
        this.displayBreadcrumbList = [];
        if (location.pathname !== '') {
            this.route = location.pathname;
            this.masterBreadcrumbList = this.route.split('/');
            this.masterBreadcrumbList = this.masterBreadcrumbList.slice(1, this.masterBreadcrumbList.length);
            for (let i = 0; i < this.masterBreadcrumbList.length; i++) {
                if (i !== 0) {
                    this.initialUrl = this.displayBreadcrumbList[i - 1];
                } else {
                    this.initialUrl = '/';
                }
                const breadCrumbObj = {
                    name: this.masterBreadcrumbList[i],
                    url: this.initialUrl + this.masterBreadcrumbList[i],
                    id: i
                };
                this.displayBreadcrumbList.push(breadCrumbObj);
            }
        } else {
            this.route = 'Home';
        }
    });
}
<ol class="breadcrumb">
        <li class="breadcrumb-item"><a class="breadcrumb-text" href="#">Home</a></li>
        <li *ngFor="let breadLink of displayBreadcrumbList" class="breadcrumb-item active" aria-current="page">
            <a href="javascript:void(0)" [routerLink]="breadLink.url" class="breadcrumb-text">{{breadLink.name }}</a></li>
    </ol>

Answer 2

Любое решение с использованием хлебных крошек должно обрабатывать -

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

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

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

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

Answer 3

Сделайте это:

const routes: Routes = [
        {
            path: 'home/solutions',
            component: SolutionsComponent,
            data: { breadcrumb: 'sample breadcrumb' },
        },
        {
            path: 'home/solutions/result',
            component:ResultComponent,
            data: { breadcrumb: 'sample breadcrumb' },
        },
        {
            path: 'home/solutions/result/contact',
            component: ContactComponent,
            data: { breadcrumb: 'sample breadcrumb' },
        }
];