ng7 динамическая проблема с сухарями - PullRequest
Новая
       22

ng7 динамическая проблема с сухарями

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

Я реализовал хлебную крошку, используя ng7-dynamic-breadcrumb.Я застрял в навигации уровня 2 в своем приложении CRUD.

Ожидается, что при изменении URL-адреса хлебная крошка должна обновиться соответствующим образом.

Пример: Рабочий URL: `http://localhost:4200/technicalSettings/disciplines?disciplineId=5250 это работает нормальнокак

Disciplines

Но когда я изменяю URL для операции создания, используя ng-шаблоны, такие как 

http://localhost:4200/technicalSettings/disciplines?disciplineId=5250&disciplineView=create

Ожидаемая хлебная крошка Disciplines > create

к сожалению это не работает.Эксперт посоветуете пожалуйста?

Маршрутизация TS 

const technicalSettingsRoutes: Routes = [
  {
    path: "",
    canActivateChild: [AuthGuard],
    children: [
      {
        path: "disciplines",
        component: DisciplinesComponent,
        data: {
          title: 'disciplines',
          breadcrumb: [
            {
              label: 'Disciplines',
              url: ''
            }
          ]
        }
      },
      {
        path: "disciplines:disciplineId",
        component: DisciplinesComponent,
        data: {
          title: 'Disciplines',
          breadcrumb: [
            {
              label: 'disciplines',
              url: 'disciplines'
            },
            {
              label: 'page {{customText}}',
              url: ''
            }
          ]
        },
      },
      { path: "", component: DisciplinesComponent, data: { breadcrumb: 'disciplines' } }

Компонент TS 

 updateBreadcrumb(): void {
    const breadcrumbs  =  [
      {
        label: 'Disciplines',
        url: 'disciplines'
      },
      {
        label: 'Create New',
        url: ''
      }
    ];
    this.ngDynamicBreadcrumbService.updateBreadcrumb(breadcrumbs);
  }

 disciplineCrudViews(view: any, openStatus: boolean) {
    this.openView = openStatus;
    this.switchView = view;
    if(view == "create") {
     this.updateBreadcrumb();
    }

    this.router.navigate([], { queryParams: { disciplineId: this.selectedId, disciplineView: view } });
  }

   onRowClicked(event: any) {
    this.isRowSelected = true;
    this.selectedId = event.data.id; //event.id;
    this.selectedItem = event;
    console.log(this.selectedItem);
    this.dataService.set(event);
    this.router.navigate([], { queryParams: { disciplineId: this.selectedId } });

  }

 ngOnInit() {

        const breadcrumb =  {customText: 'This is Custom Text', dynamicText: 'Level 2 '};
      this.ngDynamicBreadcrumbService.updateBreadcrumbLabels(breadcrumb);
    }

1 Ответ

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

@ klmuralimohan Новая функция была реализована в ng-dynamic-breadcrumb , пожалуйста, проверьте и дайте мне знать, если есть какие-либо проблемы.

Обновление Breadcrumb с помощью NgDynamicBreadcrumbService 

import { NgDynamicBreadcrumbService } from 'ng-dynamic-breadcrumb';
constructor(private ngDynamicBreadcrumbService: NgDynamicBreadcrumbService) { }

  updateBreadcrumb(): void {
    const breadcrumbs  =  [
      {
        label: 'page {{pageOneID}}',
        url: '/page1/:pageOneID'
      },
      {
        label: 'page {{pageTwoID}}',
        url: 'page1/:pageOneID/page2/:pageTwoID'
      },
      {
        label: 'page {{pageThreeID}}',
        url: 'page1/:pageOneID/page2/:pageTwoID/page3/:pageThreeID'
      },
      {
        label: 'Update Breadcrumb',
        url: ''
      }
    ];
    this.ngDynamicBreadcrumbService.updateBreadcrumb(breadcrumbs);
  }

Демонстрационный URL Stackblitz: https://ng -dynamic-breadcrumb.stackblitz.io / page1 / 1 / page2 / 2 / page3 / 3

Доступная версия NPM: https://www.npmjs.com/package/ng-dynamic-breadcrumb/v/2.0.1

...