Merge pull request #10203 from abpframework/feat/10201

Create Breadcrumblist Component

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

@@ -0,0 +1,23 @@
+<ol class="breadcrumb" *ngIf="items.length">
+  <li class="breadcrumb-item">
+    <a routerLink="/"><i class="fa fa-home"></i> </a>
+  </li>
+  <li
+    *ngFor="let item of items; let last = last"
+    class="breadcrumb-item"
+    [class.active]="last"
+    aria-current="page"
+  >
+    <ng-container
+      *ngTemplateOutlet="item.path ? linkTemplate : textTemplate; context: { $implicit: item }"
+    ></ng-container>
+  </li>
+</ol>
+
+<ng-template #linkTemplate let-item>
+  <a [routerLink]="item.path"> {{ item.name | abpLocalization }}</a>
+</ng-template>
+
+<ng-template #textTemplate let-item>
+  {{ item.name | abpLocalization }}
+</ng-template>

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

@@ -0,0 +1,9 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'abp-breadcrumb-items',
+  templateUrl: './breadcrumb-items.component.html',
+})
+export class BreadcrumbItemsComponent {
+  @Input() items = [];
+}

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

@@ -1,13 +1 @@
-<ol class="breadcrumb" *ngIf="segments.length">
+<abp-breadcrumb-items [items]="segments"></abp-breadcrumb-items>
-  <li class="breadcrumb-item">
-    <a routerLink="/"><i class="fa fa-home"></i> </a>
-  </li>
-  <li
-    *ngFor="let segment of segments; let last = last"
-    class="breadcrumb-item"
-    [class.active]="last"
-    aria-current="page"
-  >
-    {{ segment.name | abpLocalization }}
-  </li>
-</ol>

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

@@ -1,11 +1,4 @@
-import {
+import { ABP, getRoutePath, RouterEvents, RoutesService, SubscriptionService, TreeNode } from '@abp/ng.core';
-  ABP,
-  getRoutePath,
-  RouterEvents,
-  RoutesService,
-  SubscriptionService,
-  TreeNode,
-} from '@abp/ng.core';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { map, startWith } from 'rxjs/operators';
@@ -41,7 +34,7 @@ export class BreadcrumbComponent implements OnInit {
 
           while (node.parent) {
             node = node.parent;
-            const { parent, children, isLeaf, ...segment } = node;
+            const { parent, children, isLeaf, path, ...segment } = node;
             if (!isAdministration(segment)) this.segments.unshift(segment);
           }
 
@@ -52,6 +45,6 @@ export class BreadcrumbComponent implements OnInit {
   }
 }
 
-function isAdministration(route: ABP.Route) {
+function isAdministration(route: Pick<ABP.Route, 'name'>) {
   return route.name === eThemeSharedRouteNames.Administration;
 }

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -11,6 +11,7 @@ import {
 } from '@ngx-validate/core';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.component';
+import { BreadcrumbItemsComponent } from './components/breadcrumb-items/breadcrumb-items.component';
 import { ButtonComponent } from './components/button/button.component';
 import { ConfirmationComponent } from './components/confirmation/confirmation.component';
 import { HttpErrorWrapperComponent } from './components/http-error-wrapper/http-error-wrapper.component';
@@ -36,6 +37,7 @@ import { DateParserFormatter } from './utils/date-parser-formatter';
 
 const declarationsWithExports = [
   BreadcrumbComponent,
+  BreadcrumbItemsComponent,
   ButtonComponent,
   ConfirmationComponent,
   LoaderBarComponent,