diff --git a/src/directives/uiView.ts b/src/directives/uiView.ts index a9ed58018..7c8f409df 100755 --- a/src/directives/uiView.ts +++ b/src/directives/uiView.ts @@ -36,7 +36,6 @@ import { } from '@uirouter/core'; import { Ng2ViewConfig } from '../statebuilders/views'; import { MergeInjector } from '../mergeInjector'; -import { Ng2Component } from '../interface'; /** @hidden */ let id = 0; @@ -211,7 +210,7 @@ export class UIView implements OnInit, OnDestroy { * 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 instance = this._componentRef && this._componentRef.instance; const uiOnParamsChanged: TransitionHookFn = instance && instance.uiOnParamsChanged; if (isFunction(uiOnParamsChanged)) { diff --git a/src/interface.ts b/src/interface.ts index 0b0291094..42feb3f5a 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -2,7 +2,7 @@ /** */ import { StateDeclaration, _ViewDeclaration, Transition, HookResult } from '@uirouter/core'; -import { Type, Component } from '@angular/core'; +import { Component, Type } from '@angular/core'; import { ModuleTypeCallback } from './lazyLoad/lazyLoadNgModule'; /** @@ -286,6 +286,89 @@ export interface Ng2ViewDeclaration extends _ViewDeclaration { bindings?: { [key: string]: string }; } +export interface UiOnParamsChanged { + /** + * A UI-Router view has an Angular `Component` (see [[Ng2ViewDeclaration.component]]). + * The `Component` may define component-level hooks which UI-Router will call at the appropriate times. + * These callbacks are similar to Transition Hooks ([[IHookRegistry]]), but are only called if the view/component is currently active. + * + * The uiOnParamsChanged 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: '' + * }) + * 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; +} + +export interface UiOnExit { + /** + * A UI-Router view has an Angular `Component` (see [[Ng2ViewDeclaration.component]]). + * The `Component` may define component-level hooks which UI-Router will call at the appropriate times. + * These callbacks are similar to Transition Hooks ([[IHookRegistry]]), but are only called if the view/component is currently active. + * + * The uiCanExit 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. + * + * This callback is used to inform a view that it is about to be exited, due to a new [[Transition]]. + * The callback can ask for user confirmation, and cancel or alter the new Transition. The callback should + * return a value, or a promise for a value. If a promise is returned, the new Transition waits until the + * promise settles. + * + * Called when: + * - The component is still active inside a `ui-view` + * - A new Transition is about to run + * - The new Transition will exit the view's state + * + * Called with: + * - The `Transition` that is about to exit the component's state + * + * #### Example: + * ```js + * @Component({ + * template: '' + * }) + * class MyComponent { + * dirty = true; + * + * constructor(public confirmService: confirmService) { + * + * } + * + * uiCanExit(newTransition: Transition) { + * if (this.dirty && newTransition.to() !== 'logout') { + * return this.confirmService.confirm("Exit without saving changes?"); + * } + * } + * } + * ``` + * + * @return a hook result which may cancel or alter the pending Transition (see [[HookResult]]) + */ + uiCanExit(newTransition?: Transition): HookResult; +} + /** * The shape of a controller for a view (and/or component), defining the controller callbacks. * @@ -294,6 +377,8 @@ export interface Ng2ViewDeclaration extends _ViewDeclaration { * These callbacks are similar to Transition Hooks ([[IHookRegistry]]), but are only called if the view/component is currently active. * * This interface defines the UI-Router component callbacks. + * + * @deprecated This interface has been replaced by UiOnExit and UiOnParamsChanged. */ export interface Ng2Component extends Component { /**