feat(uiView): Add uiOnParamsChanged support for routed components

Closes #234

Author: christopherthielen

src/directives/uiView.ts

@@ -2,36 +2,41 @@
 /** */
 import {
   Component,
+  ComponentFactory,
   ComponentFactoryResolver,
-  ViewContainerRef,
-  Input,
   ComponentRef,
-  Type,
+  Inject,
+  Injector,
+  Input,
+  OnDestroy,
+  OnInit,
   ReflectiveInjector,
   ViewChild,
-  Injector,
-  Inject,
-  ComponentFactory,
+  ViewContainerRef,
 } from '@angular/core';
 
 import {
-  UIRouter,
+  ActiveUIView,
+  filter,
+  inArray,
   isFunction,
-  Transition,
+  NATIVE_INJECTOR_TOKEN,
+  Param,
   parse,
-  TransitionHookFn,
+  PathNode,
+  ResolveContext,
   StateDeclaration,
-  inArray,
   trace,
-  ViewContext,
+  Transition,
+  TransitionHookFn,
+  UIRouter,
+  unnestR,
   ViewConfig,
-  ActiveUIView,
-  ResolveContext,
-  NATIVE_INJECTOR_TOKEN,
-  flattenR,
+  ViewContext,
 } from '@uirouter/core';
 import { Ng2ViewConfig } from '../statebuilders/views';
 import { MergeInjector } from '../mergeInjector';
+import { Ng2Component } from '../interface';
 
 /** @hidden */
 let id = 0;
@@ -114,22 +119,26 @@ const ng2ComponentInputs = (factory: ComponentFactory<any>): InputMapping[] => {
     <ng-content *ngIf="!_componentRef"></ng-content>
   `,
 })
-export class UIView {
+export class UIView implements OnInit, OnDestroy {
   static PARENT_INJECT = 'UIView.PARENT_INJECT';
 
   @ViewChild('componentTarget', { read: ViewContainerRef })
   _componentTarget: ViewContainerRef;
   @Input('name') name: string;
+
   @Input('ui-view')
   set _name(val: string) {
     this.name = val;
   }
+
   /** The reference to the component currently inside the viewport */
   _componentRef: ComponentRef<any>;
   /** Deregisters the ui-view from the view service */
   private _deregisterUIView: Function;
   /** Deregisters the master uiCanExit transition hook */
-  private _deregisterHook: Function;
+  private _deregisterUiCanExitHook: Function;
+  /** Deregisters the master uiOnParamsChanged transition hook */
+  private _deregisterUiOnParamsChangedHook: Function;
   /** Data about the this UIView */
   private _uiViewData: ActiveUIView = <any>{};
   private _parent: ParentUIViewInject;
@@ -164,7 +173,14 @@ export class UIView {
       config: undefined,
     };
 
-    this._deregisterHook = router.transitionService.onBefore({}, trans => this._applyUiCanExitHook(trans));
+    this._deregisterUiCanExitHook = router.transitionService.onBefore({}, trans => {
+      return this._invokeUiCanExitHook(trans);
+    });
+
+    this._deregisterUiOnParamsChangedHook = router.transitionService.onSuccess({}, trans =>
+      this._invokeUiOnParamsChangedHook(trans),
+    );
+
     this._deregisterUIView = router.viewService.registerUIView(this._uiViewData);
   }
 
@@ -176,7 +192,7 @@ export class UIView {
    *
    * If both are true, adds the uiCanExit component function as a hook to that singular Transition.
    */
-  private _applyUiCanExitHook(trans: Transition) {
+  private _invokeUiCanExitHook(trans: Transition) {
     const instance = this._componentRef && this._componentRef.instance;
     const uiCanExitFn: TransitionHookFn = instance && instance.uiCanExit;
 
@@ -191,14 +207,61 @@ export class UIView {
     }
   }
 
+  /**
+   * For each transition, checks if any param values changed and notify component
+   */
+  private _invokeUiOnParamsChangedHook($transition$: Transition) {
+    const instance: Ng2Component = this._componentRef && this._componentRef.instance;
+    const uiOnParamsChanged: TransitionHookFn = instance && instance.uiOnParamsChanged;
+
+    if (isFunction(uiOnParamsChanged)) {
+      const viewState: StateDeclaration = this.state;
+      const resolveContext: ResolveContext = new ResolveContext(this._uiViewData.config.path);
+      const viewCreationTrans = resolveContext.getResolvable('$transition$').data;
+
+      // Exit early if the $transition$ is the same as the view was created within.
+      // Exit early if the $transition$ will exit the state the view is for.
+      if ($transition$ === viewCreationTrans || $transition$.exiting().indexOf(viewState as StateDeclaration) !== -1)
+        return;
+
+      const toParams: { [paramName: string]: any } = $transition$.params('to');
+      const fromParams: { [paramName: string]: any } = $transition$.params('from');
+      const getNodeSchema = (node: PathNode) => node.paramSchema;
+      const toSchema: Param[] = $transition$
+        .treeChanges('to')
+        .map(getNodeSchema)
+        .reduce(unnestR, []);
+      const fromSchema: Param[] = $transition$
+        .treeChanges('from')
+        .map(getNodeSchema)
+        .reduce(unnestR, []);
+
+      // Find the to params that have different values than the from params
+      const changedToParams = toSchema.filter((param: Param) => {
+        const idx = fromSchema.indexOf(param);
+        return idx === -1 || !fromSchema[idx].type.equals(toParams[param.id], fromParams[param.id]);
+      });
+
+      // Only trigger callback if a to param has changed or is new
+      if (changedToParams.length) {
+        const changedKeys: string[] = changedToParams.map(x => x.id);
+        // Filter the params to only changed/new to params.  `$transition$.params()` may be used to get all params.
+        const newValues = filter(toParams, (val, key) => changedKeys.indexOf(key) !== -1);
+        instance.uiOnParamsChanged(newValues, $transition$);
+      }
+    }
+  }
+
   private _disposeLast() {
     if (this._componentRef) this._componentRef.destroy();
     this._componentRef = null;
   }
 
   ngOnDestroy() {
     if (this._deregisterUIView) this._deregisterUIView();
-    if (this._deregisterHook) this._deregisterHook();
+    if (this._deregisterUiCanExitHook) this._deregisterUiCanExitHook();
+    if (this._deregisterUiOnParamsChangedHook) this._deregisterUiOnParamsChangedHook();
+    this._deregisterUIView = this._deregisterUiCanExitHook = this._deregisterUiOnParamsChangedHook = null;
     this._disposeLast();
   }
 

src/interface.ts

@@ -340,7 +340,36 @@ export interface Ng2ViewDeclaration extends _ViewDeclaration {
  */
 export interface Ng2Component extends Component {
   /**
-   * This callback is called when the a routed component's state is about to be exited.
+   * This callback is called when parameter values change
+   *
+   * This callback is used to respond dynamic parameter values changing.
+   * It is called when a transition changed one or more dynamic parameter values,
+   * and the routed component was not destroyed.
+   *
+   * It receives two parameters:
+   *
+   * - An object with (only) changed parameter values.
+   *   The keys are the parameter names and the values are the new parameter values.
+   * - The [[Transition]] which changed the parameter values.
+   *
+   * #### Example:
+   * ```js
+   * @Component({
+   *   template: '<input type="text">'
+   * })
+   * class MyComponent {
+   *   uiOnParamsChanged(newParams: { [paramName: string]: any }, trans: Transition) {
+   *     Object.keys(newParams).forEach(paramName => {
+   *       console.log(`${paramName} changed to ${newParams[paramName]}`)
+   *     });
+   *   }
+   * }
+   * ```
+   */
+  uiOnParamsChanged?(newParams: { [paramName: string]: any }, trans?: Transition): void;
+
+  /**
+   * This callback is called when the routed component's state is about to be exited.
    *
    * The callback can be used to cancel or alter the new Transition that would otherwise exit the component's state.
    *
@@ -379,5 +408,5 @@ export interface Ng2Component extends Component {
    *
    * @return a hook result which may cancel or alter the pending Transition (see [[HookResult]])
    */
-  uiCanExit(newTransition?: Transition): HookResult;
+  uiCanExit?(newTransition?: Transition): HookResult;
 }

test/uiView/uiOnParamsChanged.spec.ts

@@ -0,0 +1,148 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Ng2StateDeclaration, UIRouterModule, UIView } from '../../src';
+import { memoryLocationPlugin, Transition, UIRouter } from '@uirouter/core';
+import { APP_BASE_HREF } from '@angular/common';
+
+describe('uiView', () => {
+  describe('should map resolve data to inputs', () => {
+    type Params = { [paramName: string]: any };
+
+    let paramChanges: Params[];
+    let lifecycle: string[];
+
+    let fixture: ComponentFixture<UIView>;
+    let router: UIRouter;
+
+    let id = 0;
+
+    @Component({ template: `<h3>hey</h3> ` })
+    class ParamWatcherComponent {
+      $id = id++;
+
+      public uiOnParamsChanged(newParams: { [paramName: string]: any }, trans: Transition) {
+        paramChanges.push(newParams);
+      }
+
+      public ngOnInit() {
+        lifecycle.push(`ngOnInit-${this.$id}`);
+      }
+
+      public ngOnDestroy() {
+        lifecycle.push(`ngOnDestroy-${this.$id}`);
+      }
+    }
+
+    beforeEach(done => {
+      id = 0;
+      paramChanges = [];
+      lifecycle = [];
+
+      const hasDynamicParams: Ng2StateDeclaration = {
+        name: 'hasDynamicParams',
+        component: ParamWatcherComponent,
+        url: '/url/:param1/:param2?param3',
+        params: {
+          param2: { dynamic: true },
+          param3: { dynamic: true },
+        },
+      };
+
+      const config = (router: UIRouter) => router.plugin(memoryLocationPlugin);
+      const routerModule = UIRouterModule.forRoot({ config, states: [hasDynamicParams] });
+
+      fixture = TestBed.configureTestingModule({
+        declarations: [ParamWatcherComponent],
+        imports: [routerModule],
+        providers: [{ provide: APP_BASE_HREF, useValue: '/' }],
+      }).createComponent(UIView);
+      fixture.detectChanges();
+
+      router = fixture.debugElement.injector.get(UIRouter);
+
+      done();
+    });
+
+    afterEach(() => {
+      router.urlService.url('');
+      router.dispose();
+      fixture.destroy();
+    });
+
+    ////////////////////////////////////////////////////////////////////////////////
+
+    it('should not receive the initial parameter values', async done => {
+      expect(lifecycle).toEqual([]);
+
+      await router.stateService.go('hasDynamicParams', { param1: 'foo1', param2: 'bar1' });
+      fixture.detectChanges();
+
+      expect(lifecycle).toEqual(['ngOnInit-0']);
+      expect(paramChanges).toEqual([]);
+
+      done();
+    });
+
+    it('should receive dynamic parameter changes', async done => {
+      expect(lifecycle).toEqual([]);
+
+      await router.stateService.go('hasDynamicParams', { param1: 'foo3', param2: 'bar3' });
+      fixture.detectChanges();
+
+      expect(lifecycle).toEqual(['ngOnInit-0']);
+      expect(paramChanges).toEqual([]);
+
+      done();
+    });
+
+    it('should receive dynamic parameter changes', async done => {
+      expect(lifecycle).toEqual([]);
+
+      await router.stateService.go('hasDynamicParams', { param1: 'foo', param2: 'bar' });
+      fixture.detectChanges();
+
+      expect(lifecycle).toEqual(['ngOnInit-0']);
+
+      await router.stateService.go('.', { param2: 'notbar' });
+      fixture.detectChanges();
+
+      expect(lifecycle).toEqual(['ngOnInit-0']);
+      expect(paramChanges).toEqual([{ param2: 'notbar' }]);
+
+      done();
+    });
+
+    it('should receive multiple parameter changes', async done => {
+      expect(lifecycle).toEqual([]);
+
+      await router.stateService.go('hasDynamicParams', { param1: 'foo', param2: 'bar' });
+      fixture.detectChanges();
+
+      expect(lifecycle).toEqual(['ngOnInit-0']);
+      await router.stateService.go('.', { param2: 'notbar', param3: 'baz' });
+      fixture.detectChanges();
+
+      expect(lifecycle).toEqual(['ngOnInit-0']);
+      expect(paramChanges).toEqual([{ param2: 'notbar', param3: 'baz' }]);
+
+      done();
+    });
+
+    it('should not receive non-dynamic parameter changes', async done => {
+      expect(lifecycle).toEqual([]);
+
+      await router.stateService.go('hasDynamicParams', { param1: 'foo', param2: 'bar' });
+      fixture.detectChanges();
+
+      expect(lifecycle).toEqual(['ngOnInit-0']);
+
+      await router.stateService.go('hasDynamicParams', { param1: 'notfoo' });
+      fixture.detectChanges();
+
+      expect(lifecycle).toEqual(['ngOnInit-0', 'ngOnDestroy-0', 'ngOnInit-1']);
+      expect(paramChanges).toEqual([]);
+
+      done();
+    });
+  });
+});