feat: add deep comparison of params (#52)

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(
@@ -81,16 +83,6 @@ export class RouterComponent implements OnInit, OnDestroy {
       .subscribe();
   }
 
-  findRouteMatch(route: Route, url: string) {
-    const matchedRoute = route.matcher ? route.matcher.exec(url) : null;
-
-    if (matchedRoute) {
-      return matchedRoute;
-    }
-
-    return null;
-  }
-
   setRoute(url: string, route: Route) {
     const pathInfo = match(this.normalizePath(route.path), {
       end: route.options.exact,
@@ -114,15 +106,40 @@ export class RouterComponent implements OnInit, OnDestroy {
     return route;
   }
 
-  setActiveRoute(active: ActiveRoute) {
+  ngOnDestroy() {
+    this.destroy$.next();
+  }
+
+  private findRouteMatch(route: Route, url: string) {
+    const matchedRoute = route.matcher ? route.matcher.exec(url) : null;
+
+    if (matchedRoute) {
+      return matchedRoute;
+    }
+
+    return null;
+  }
+
+  private setActiveRoute(active: ActiveRoute) {
     this._activeRoute$.next(active);
   }
 
-  normalizePath(path: string) {
+  private normalizePath(path: string) {
     return this.location.normalize(path);
   }
 
-  ngOnDestroy() {
-    this.destroy$.next();
+  private compareActiveRoutes(
+    previous: ActiveRoute,
+    current: ActiveRoute
+  ): boolean {
+    if (previous === current) {
+      return true;
+    }
+    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());