Merge pull request #6 from jblackburn21/breadcrumbObservable

fix: #5 update breadcrumbs when route changes

Author: mrholek

src/breadcrumb/app-breadcrumb.component.ts

@@ -5,7 +5,7 @@ import { AppBreadcrumbService } from './app-breadcrumb.service';
 @Component({
   selector: 'app-breadcrumb',
   template: `
-    <ng-template ngFor let-breadcrumb [ngForOf]="breadcrumbs" let-last = last>
+    <ng-template ngFor let-breadcrumb [ngForOf]="breadcrumbs | async" let-last = last>
       <li class="breadcrumb-item"
           *ngIf="breadcrumb.label.title&&breadcrumb.url.substring(breadcrumb.url.length-1) == '/'||breadcrumb.label.title&&last"
           [ngClass]="{active: last}">
@@ -25,9 +25,6 @@ export class AppBreadcrumbComponent implements OnInit {
     Replace(this.el);
     this.isFixed(this.fixed);
     this.breadcrumbs = this.service.breadcrumbs;
-    // const s = this.service.crumbs$.subscribe((x) => {
-    //   this.crumbs = x;
-    // });
   }
 
   isFixed(fixed: boolean): void {

src/breadcrumb/app-breadcrumb.service.ts

@@ -1,35 +1,45 @@
-import { Injectable, Injector } from '@angular/core';
-import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
-import 'rxjs/add/operator/filter';
-
-@Injectable()
-export class AppBreadcrumbService {
-
-  public breadcrumbs: Array<Object>;
-
-  constructor(private router: Router, private route: ActivatedRoute) {
-
-    this.router.events.filter(event => event instanceof NavigationEnd).subscribe((event) => {
-      this.breadcrumbs = [];
-      let currentRoute = this.route.root,
-      url = '';
-      do {
-        const childrenRoutes = currentRoute.children;
-        currentRoute = null;
-        // tslint:disable-next-line:no-shadowed-variable
-        childrenRoutes.forEach(route => {
-          if (route.outlet === 'primary') {
-            const routeSnapshot = route.snapshot;
-            url += '/' + routeSnapshot.url.map(segment => segment.path).join('/');
-            this.breadcrumbs.push({
-              label: route.snapshot.data,
-              url:   url
-            });
-            currentRoute = route;
-          }
-        });
-      } while (currentRoute);
-      return this.breadcrumbs;
-    });
-  }
-}
+import { Injectable, Injector } from '@angular/core';
+import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
+import { BehaviorSubject, Observable } from 'rxjs';
+import 'rxjs/add/operator/filter';
+
+@Injectable()
+export class AppBreadcrumbService {
+
+  breadcrumbs: Observable<Array<Object>>;
+
+  private _breadcrumbs: BehaviorSubject<Array<Object>>;
+
+  constructor(private router: Router, private route: ActivatedRoute) {
+
+    this._breadcrumbs = new BehaviorSubject<Object[]>(new Array<Object>());
+
+    this.breadcrumbs = this._breadcrumbs.asObservable();
+
+    this.router.events.filter(event => event instanceof NavigationEnd).subscribe((event) => {
+      const breadcrumbs = [];
+      let currentRoute = this.route.root,
+      url = '';
+      do {
+        const childrenRoutes = currentRoute.children;
+        currentRoute = null;
+        // tslint:disable-next-line:no-shadowed-variable
+        childrenRoutes.forEach(route => {
+          if (route.outlet === 'primary') {
+            const routeSnapshot = route.snapshot;
+            url += '/' + routeSnapshot.url.map(segment => segment.path).join('/');
+            breadcrumbs.push({
+              label: route.snapshot.data,
+              url:   url
+            });
+            currentRoute = route;
+          }
+        });
+      } while (currentRoute);
+
+      this._breadcrumbs.next(Object.assign([], breadcrumbs));
+
+      return breadcrumbs;
+    });
+  }
+}