feat: use RoutesService in BreadcrumbComponent

npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb/breadcrumb.component.html

@@ -1,4 +1,4 @@
-<ol *ngIf="show" class="breadcrumb">
+<ol class="breadcrumb" *ngIf="segments.length">
   <li class="breadcrumb-item">
     <a routerLink="/"><i class="fa fa-home"></i> </a>
   </li>
@@ -8,6 +8,6 @@
     [class.active]="last"
     aria-current="page"
   >
-    {{ segment | abpLocalization }}
+    {{ segment.name | abpLocalization }}
   </li>
 </ol>

npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb/breadcrumb.component.ts

@@ -1,56 +1,52 @@
-import { ABP, ConfigState } from '@abp/ng.core';
+import { ABP, getRoutePath, RoutesService, takeUntilDestroy, TreeNode } from '@abp/ng.core';
-import { Component, Input, OnInit } from '@angular/core';
+import {
-import { Router } from '@angular/router';
+  ChangeDetectionStrategy,
-import { Store } from '@ngxs/store';
+  ChangeDetectorRef,
+  Component,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter, map, startWith } from 'rxjs/operators';
 
 @Component({
   selector: 'abp-breadcrumb',
   templateUrl: './breadcrumb.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class BreadcrumbComponent implements OnInit {
+export class BreadcrumbComponent implements OnDestroy, OnInit {
-  @Input()
+  segments: Partial<ABP.Route>[] = [];
-  segments: string[] = [];
 
-  show: boolean;
+  constructor(
+    public readonly cdRef: ChangeDetectorRef,
+    private router: Router,
+    private routes: RoutesService,
+  ) {}
 
-  constructor(private router: Router, private store: Store) {}
+  ngOnDestroy() {}
 
   ngOnInit(): void {
-    this.show = !!this.store.selectSnapshot(state => state.LeptonLayoutState);
+    this.router.events
-
+      .pipe(
-    if (this.show && !this.segments.length) {
+        takeUntilDestroy(this),
-      let splittedUrl = this.router.url.split('/').filter(chunk => chunk);
+        filter<NavigationEnd>(event => event instanceof NavigationEnd),
-
+        // tslint:disable-next-line:deprecation
-      let currentUrl: ABP.FullRoute = this.store.selectSnapshot(
+        startWith(null),
-        ConfigState.getRoute(splittedUrl[0]),
+        map(() => this.routes.search({ path: getRoutePath(this.router) })),
-      );
+      )
-
+      .subscribe(route => {
-      if (!currentUrl) {
+        this.segments = [];
-        currentUrl = this.store.selectSnapshot(ConfigState.getRoute(null, null, this.router.url));
+        if (route) {
-        splittedUrl = [this.router.url];
+          let node = { parent: route } as TreeNode<ABP.Route>;
-        if (!currentUrl) {
+
-          this.show = false;
+          while (node.parent) {
-          return;
+            node = node.parent;
-        }
+            const { parent, children, ...segment } = node;
-      }
+            this.segments.unshift(segment);
-
+          }
-      this.segments.push(currentUrl.name);
+
-
+          this.cdRef.detectChanges();
-      if (splittedUrl.length > 1) {
-        const [, ...arr] = splittedUrl;
-
-        let childRoute: ABP.FullRoute = currentUrl;
-        for (let i = 0; i < arr.length; i++) {
-          const element = String(arr[i])
-            .split(/[?#(]/)
-            .shift();
-          if (!childRoute.children || !childRoute.children.length) return;
-
-          childRoute = childRoute.children.find(child => child.path === element);
-
-          this.segments.push(childRoute.name);
         }
-      }
+      });
-    }
   }
 }