feat(core): Added an abstraction for the router access

fixes #21

Author: Airblader

projects/ngqp/core/src/lib/core.ts

@@ -20,4 +20,5 @@ export {
     DEFAULT_BOOLEAN_DESERIALIZER,
 } from './serializers';
 
-export * from './accessors/accessors';
+export * from './accessors/accessors';
+export * from './router-adapter/router-adapter';

projects/ngqp/core/src/lib/query-param-group.directive.ts

@@ -1,7 +1,8 @@
-import { Directive, Input, OnDestroy, OnInit } from '@angular/core';
-import { ActivatedRoute, Params, Router } from '@angular/router';
+import { Directive, Inject, Input, OnDestroy, OnInit } from '@angular/core';
+import { Params } from '@angular/router';
 import { Subject } from 'rxjs';
 import { bufferTime, concatMap, debounceTime, map, takeUntil, tap } from 'rxjs/operators';
+import { NGQP_ROUTER_ADAPTER, RouterAdapter } from './router-adapter/router-adapter.interface';
 import { QueryParamNameDirective } from './query-param-name.directive';
 import { QueryParamControl, QueryParamGroup } from './model';
 import { isMissing } from './util';
@@ -25,10 +26,7 @@ export class QueryParamGroupDirective implements OnInit, OnDestroy {
     private queue$ = new Subject<Params>();
     private destroy$ = new Subject<void>();
 
-    constructor(
-        private router: Router,
-        private route: ActivatedRoute,
-    ) {
+    constructor(@Inject(NGQP_ROUTER_ADAPTER) private routerAdapter: RouterAdapter) {
         this.setupNavigationQueue();
     }
 
@@ -38,7 +36,7 @@ export class QueryParamGroupDirective implements OnInit, OnDestroy {
             control.registerOnChange((newModel: any) => this.enqueueNavigation(this.getParamsForModel(control, newModel)));
         });
 
-        this.route.queryParamMap.subscribe(queryParamMap => {
+        this.routerAdapter.queryParamMap.subscribe(queryParamMap => {
             Object.keys(this.queryParamGroup.controls).forEach(controlName => {
                 const control: QueryParamControl<any> = this.queryParamGroup.get(controlName);
                 const newModel = control.deserialize(queryParamMap.get(control.name));
@@ -107,11 +105,7 @@ export class QueryParamGroupDirective implements OnInit, OnDestroy {
                 return { ...a, ...b };
             }, {})),
 
-            concatMap(params => this.router.navigate([], {
-                relativeTo: this.route,
-                queryParamsHandling: 'merge',
-                queryParams: params,
-            })),
+            concatMap(params => this.routerAdapter.navigate(params)),
         ).subscribe();
     }
 

projects/ngqp/core/src/lib/query-param.module.ts

@@ -9,6 +9,7 @@ import {
     RangeControlValueAccessorDirective,
     SelectControlValueAccessorDirective
 } from './accessors/accessors';
+import { DefaultRouterAdapter, NGQP_ROUTER_ADAPTER } from './router-adapter/router-adapter';
 
 const DIRECTIVES: Type<any>[] = [
     QueryParamNameDirective,
@@ -27,6 +28,9 @@ const DIRECTIVES: Type<any>[] = [
     imports: [],
     declarations: [ DIRECTIVES ],
     exports: [ DIRECTIVES ],
+    providers: [
+        { provide: NGQP_ROUTER_ADAPTER, useClass: DefaultRouterAdapter },
+    ],
 })
 export class QueryParamModule {
 }

projects/ngqp/core/src/lib/router-adapter/default-router-adapter.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { RouterAdapter } from './router-adapter.interface';
+
+@Injectable()
+export class DefaultRouterAdapter implements RouterAdapter {
+
+    constructor(private router: Router, private route: ActivatedRoute) {
+    }
+
+    public get url() {
+        return this.router.url;
+    }
+
+    public get queryParamMap() {
+        return this.route.queryParamMap;
+    }
+
+    public navigate(queryParams: Params): Promise<boolean> {
+        return this.router.navigate([], {
+            relativeTo: this.route,
+            queryParamsHandling: 'merge',
+            queryParams: queryParams,
+        });
+    }
+
+}

projects/ngqp/core/src/lib/router-adapter/router-adapter.interface.ts

@@ -0,0 +1,30 @@
+import { InjectionToken } from '@angular/core';
+import { ParamMap, Params } from '@angular/router';
+import { Observable } from 'rxjs';
+
+/**
+ * TODO Documentation
+ */
+export interface RouterAdapter {
+
+    /**
+     * TODO Documentation
+     */
+    url: string;
+
+    /**
+     * TODO Documentation
+     */
+    queryParamMap: Observable<ParamMap>;
+
+    /**
+     * TODO Documentation
+     */
+    navigate(queryParams: Params): Promise<boolean>;
+
+}
+
+/**
+ * TODO Documentation
+ */
+export const NGQP_ROUTER_ADAPTER = new InjectionToken<RouterAdapter>('NGQP_ROUTER_ADAPTER');

projects/ngqp/core/src/lib/router-adapter/router-adapter.ts

@@ -0,0 +1,2 @@
+export { RouterAdapter, NGQP_ROUTER_ADAPTER } from './router-adapter.interface';
+export { DefaultRouterAdapter } from './default-router-adapter.service';