Question

我已经使用ng7-dynamic-breadcrumb实现了面包屑。我在CRUD应用程序中停留在level2导航中。

预期是，当url更改时，面包屑应相应更新。

例如：工作网址：`http://localhost:4200/technicalSettings/disciplines?disciplineId=5250可以正常工作

Disciplines

但是当我使用ng-templates更改用于创建操作的URL

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);
    }

Answer 1

@klmuralimohan ng-dynamic-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);
  }

Stackblitz演示URL：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

ng7动态面包屑问题

1 个答案: