feat: use deep compare for checking params (#57)

Author: meeroslav

libs/angular-routing/src/lib/route-params.service.ts

@@ -9,3 +9,9 @@ export class RoutePath<T extends string = string> extends Observable<T> {}
 export class RouteParams<T extends Params = Params> extends Observable<T> {}
 
 export class QueryParams<T extends Params = Params> extends Observable<T> {}
+
+export function compareParams(previous: Params, current: Params): boolean {
+  return (
+    previous === current || JSON.stringify(previous) === JSON.stringify(current)
+  );
+}

libs/angular-routing/src/lib/router.component.ts

@@ -19,7 +19,7 @@ import { pathToRegexp, match } from 'path-to-regexp';
 
 import { Route, ActiveRoute } from './route';
 import { Router } from './router.service';
-import { Params } from './route-params.service';
+import { compareParams, Params } from './route-params.service';
 
 @Component({
   // tslint:disable-next-line:component-selector
@@ -30,7 +30,9 @@ export class RouterComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject();
 
   private _activeRoute$ = new BehaviorSubject<ActiveRoute>(null);
-  readonly activeRoute$ = this._activeRoute$.pipe(distinctUntilChanged());
+  readonly activeRoute$ = this._activeRoute$.pipe(
+    distinctUntilChanged(this.compareActiveRoutes)
+  );
 
   private _routes$ = new BehaviorSubject<Route[]>([]);
   readonly routes$ = this._routes$.pipe(
@@ -125,4 +127,22 @@ export class RouterComponent implements OnInit, OnDestroy {
   ngOnDestroy() {
     this.destroy$.next();
   }
+
+  private compareActiveRoutes(
+    previous: ActiveRoute,
+    current: ActiveRoute
+  ): boolean {
+    if (previous === current) {
+      return true;
+    }
+    if (!previous) {
+      return false;
+    }
+    return (
+      previous.path === current.path &&
+      compareParams(previous.params, current.params) &&
+      previous.route.path === current.route.path &&
+      previous.route.options.exact === current.route.options.exact
+    );
+  }
 }

libs/angular-routing/src/lib/router.service.ts

@@ -7,7 +7,7 @@ import { distinctUntilChanged } from 'rxjs/operators';
 import * as queryString from 'query-string';
 
 import { UrlParser } from './url-parser';
-import { Params } from './route-params.service';
+import { Params, compareParams } from './route-params.service';
 
 @Injectable({
   providedIn: 'root',
@@ -17,7 +17,9 @@ export class Router {
   readonly url$ = this._url$.pipe(distinctUntilChanged());
 
   private _queryParams$ = new BehaviorSubject<Params>({});
-  readonly queryParams$ = this._queryParams$.pipe(distinctUntilChanged());
+  readonly queryParams$ = this._queryParams$.pipe(
+    distinctUntilChanged(compareParams)
+  );
 
   private _hash$ = new BehaviorSubject<string>('');
   readonly hash$ = this._hash$.pipe(distinctUntilChanged());