fix(core): Use OnChanges instead of OnInit

This lets us throw a better error and ultimately prepares for future
changes where we support changing values at runtime.

fixes #52

Author: Airblader

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

@@ -1,4 +1,4 @@
-import { Directive, Input, OnInit } from '@angular/core';
+import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { QueryParamNameDirective } from './query-param-name.directive';
 import { QueryParamGroup } from '../model/query-param-group';
 import { QueryParamGroupService } from './query-param-group.service';
@@ -14,7 +14,7 @@ import { QueryParamGroupService } from './query-param-group.service';
     selector: '[queryParamGroup]',
     providers: [QueryParamGroupService],
 })
-export class QueryParamGroupDirective implements OnInit {
+export class QueryParamGroupDirective implements OnChanges {
 
     /**
      * The {@link QueryParamGroup} to bind.
@@ -26,12 +26,20 @@ export class QueryParamGroupDirective implements OnInit {
     }
 
     /** @ignore */
-    public ngOnInit() {
-        if (!this.queryParamGroup) {
-            throw new Error(`You added the queryParamGroup directive, but haven't supplied a group to use.`);
-        }
+    public ngOnChanges(changes: SimpleChanges) {
+        const groupChange = changes['queryParamGroup'];
+        if (groupChange) {
+            if (!groupChange.firstChange) {
+                throw new Error(`Binding a different QueryParamGroup during runtime is currently not supported.`);
+            }
+
+            const queryParamGroup = groupChange.currentValue;
+            if (!queryParamGroup) {
+                throw new Error(`You added the queryParamGroup directive, but haven't supplied a group to use.`);
+            }
 
-        this.groupService.setQueryParamGroup(this.queryParamGroup);
+            this.groupService.setQueryParamGroup(queryParamGroup);
+        }
     }
 
 }

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

@@ -1,4 +1,4 @@
-import { Directive, Inject, Input, OnInit, Optional, Self } from '@angular/core';
+import { Directive, Inject, Input, OnChanges, Optional, Self, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DefaultControlValueAccessorDirective, NGQP_BUILT_IN_ACCESSORS } from '../accessors/accessors';
 import { QueryParamGroupService } from './query-param-group.service';
@@ -13,7 +13,7 @@ import { QueryParamGroupService } from './query-param-group.service';
 @Directive({
     selector: '[queryParamName]',
 })
-export class QueryParamNameDirective implements OnInit {
+export class QueryParamNameDirective implements OnChanges {
 
     /**
      * The name of the {@link QueryParam} inside its parent {@link QueryParamGroup}.
@@ -37,12 +37,20 @@ export class QueryParamNameDirective implements OnInit {
     }
 
     /** @ignore */
-    public ngOnInit() {
-        if (!this.name) {
-            throw new Error(`queryParamName has been added, but without specifying the name.`);
-        }
+    public ngOnChanges(changes: SimpleChanges) {
+        const nameChange = changes['name'];
+        if (nameChange) {
+            if (!nameChange.firstChange) {
+                throw new Error(`You tried to switch from queryParamName=${nameChange.previousValue} to queryParamName=${nameChange.currentValue} which is currently not supported.`);
+            }
 
-        this.groupService.addQueryParam(this);
+            const name = nameChange.currentValue;
+            if (!name) {
+                throw new Error(`queryParamName has been added, but without specifying the name.`);
+            }
+
+            this.groupService.addQueryParam(this);
+        }
     }
 
     /**