2016-06-23 12:47:54 -04:00
|
|
|
/**
|
|
|
|
* @license
|
|
|
|
* Copyright Google Inc. All Rights Reserved.
|
|
|
|
*
|
|
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
|
|
* found in the LICENSE file at https://angular.io/license
|
|
|
|
*/
|
|
|
|
|
2016-06-08 14:13:41 -04:00
|
|
|
import {ComponentFactory, Type} from '@angular/core';
|
|
|
|
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
|
|
|
|
import {Observable} from 'rxjs/Observable';
|
|
|
|
|
2016-06-27 17:00:07 -04:00
|
|
|
import {Data, ResolveData, Route} from './config';
|
2016-06-08 14:13:41 -04:00
|
|
|
import {PRIMARY_OUTLET, Params} from './shared';
|
2016-07-25 15:15:07 -04:00
|
|
|
import {UrlSegment, UrlSegmentGroup, UrlTree} from './url_tree';
|
2016-06-27 17:00:07 -04:00
|
|
|
import {merge, shallowEqual, shallowEqualArrays} from './utils/collection';
|
2016-06-08 14:13:41 -04:00
|
|
|
import {Tree, TreeNode} from './utils/tree';
|
|
|
|
|
2016-05-23 19:14:23 -04:00
|
|
|
|
2016-05-24 16:41:37 -04:00
|
|
|
/**
|
2016-06-01 20:55:21 -04:00
|
|
|
* The state of the router.
|
2016-05-24 16:41:37 -04:00
|
|
|
*
|
|
|
|
* ### Usage
|
|
|
|
*
|
|
|
|
* ```
|
2016-08-30 18:57:24 -04:00
|
|
|
* @Component({template:''})
|
2016-05-24 16:41:37 -04:00
|
|
|
* class MyComponent {
|
|
|
|
* constructor(router: Router) {
|
|
|
|
* const state = router.routerState;
|
2016-08-30 18:57:24 -04:00
|
|
|
* const id: Observable<string> = state.root.firstChild.params.map(p => p.id);
|
|
|
|
* const isDebug: Observable<string> = state.root.queryParams.map(q => q.debug);
|
2016-05-24 16:41:37 -04:00
|
|
|
* }
|
|
|
|
* }
|
|
|
|
* ```
|
2016-06-27 15:27:23 -04:00
|
|
|
*
|
2016-06-28 17:49:29 -04:00
|
|
|
* @stable
|
2016-05-24 16:41:37 -04:00
|
|
|
*/
|
2016-05-23 19:14:23 -04:00
|
|
|
export class RouterState extends Tree<ActivatedRoute> {
|
2016-06-02 18:18:34 -04:00
|
|
|
/**
|
|
|
|
* @internal
|
|
|
|
*/
|
2016-08-02 18:31:56 -04:00
|
|
|
constructor(root: TreeNode<ActivatedRoute>, public snapshot: RouterStateSnapshot) {
|
2016-05-23 19:14:23 -04:00
|
|
|
super(root);
|
2016-08-02 17:34:00 -04:00
|
|
|
setRouterStateSnapshot<RouterState, ActivatedRoute>(this, root);
|
2016-05-23 19:14:23 -04:00
|
|
|
}
|
2016-06-09 17:11:54 -04:00
|
|
|
|
2016-06-09 17:33:09 -04:00
|
|
|
toString(): string { return this.snapshot.toString(); }
|
2016-05-23 19:14:23 -04:00
|
|
|
}
|
|
|
|
|
2016-08-10 21:21:28 -04:00
|
|
|
export function createEmptyState(urlTree: UrlTree, rootComponent: Type<any>): RouterState {
|
2016-06-14 17:55:59 -04:00
|
|
|
const snapshot = createEmptyStateSnapshot(urlTree, rootComponent);
|
2016-07-25 15:15:07 -04:00
|
|
|
const emptyUrl = new BehaviorSubject([new UrlSegment('', {})]);
|
2016-05-23 19:14:23 -04:00
|
|
|
const emptyParams = new BehaviorSubject({});
|
2016-06-27 17:00:07 -04:00
|
|
|
const emptyData = new BehaviorSubject({});
|
2016-05-23 19:14:23 -04:00
|
|
|
const emptyQueryParams = new BehaviorSubject({});
|
2016-06-08 14:13:41 -04:00
|
|
|
const fragment = new BehaviorSubject('');
|
2016-06-27 17:00:07 -04:00
|
|
|
const activated = new ActivatedRoute(
|
2016-08-02 18:31:56 -04:00
|
|
|
emptyUrl, emptyParams, emptyQueryParams, fragment, emptyData, PRIMARY_OUTLET, rootComponent,
|
|
|
|
snapshot.root);
|
2016-06-02 17:44:57 -04:00
|
|
|
activated.snapshot = snapshot.root;
|
2016-08-02 18:31:56 -04:00
|
|
|
return new RouterState(new TreeNode<ActivatedRoute>(activated, []), snapshot);
|
2016-05-23 19:14:23 -04:00
|
|
|
}
|
|
|
|
|
2016-08-10 18:53:57 -04:00
|
|
|
export function createEmptyStateSnapshot(
|
2016-08-10 21:21:28 -04:00
|
|
|
urlTree: UrlTree, rootComponent: Type<any>): RouterStateSnapshot {
|
2016-06-01 16:29:02 -04:00
|
|
|
const emptyParams = {};
|
2016-06-27 17:00:07 -04:00
|
|
|
const emptyData = {};
|
2016-06-01 16:29:02 -04:00
|
|
|
const emptyQueryParams = {};
|
2016-06-08 14:13:41 -04:00
|
|
|
const fragment = '';
|
|
|
|
const activated = new ActivatedRouteSnapshot(
|
2016-08-02 18:31:56 -04:00
|
|
|
[], emptyParams, emptyQueryParams, fragment, emptyData, PRIMARY_OUTLET, rootComponent, null,
|
|
|
|
urlTree.root, -1, InheritedResolve.empty);
|
|
|
|
return new RouterStateSnapshot('', new TreeNode<ActivatedRouteSnapshot>(activated, []));
|
2016-06-01 16:29:02 -04:00
|
|
|
}
|
|
|
|
|
2016-05-24 16:41:37 -04:00
|
|
|
/**
|
2016-06-08 14:13:41 -04:00
|
|
|
* Contains the information about a component loaded in an outlet. The information is provided
|
2016-06-28 17:49:29 -04:00
|
|
|
* through the params, urlSegments, and data observables.
|
2016-05-24 16:41:37 -04:00
|
|
|
*
|
|
|
|
* ### Usage
|
|
|
|
*
|
|
|
|
* ```
|
2016-08-30 18:57:24 -04:00
|
|
|
* @Component({template:''})
|
2016-05-24 16:41:37 -04:00
|
|
|
* class MyComponent {
|
|
|
|
* constructor(route: ActivatedRoute) {
|
|
|
|
* const id: Observable<string> = route.params.map(p => p.id);
|
2016-06-28 17:49:29 -04:00
|
|
|
* const data = route.data.map(d => d.user); //includes `data` and `resolve`
|
2016-05-24 16:41:37 -04:00
|
|
|
* }
|
|
|
|
* }
|
|
|
|
* ```
|
2016-06-27 15:27:23 -04:00
|
|
|
*
|
2016-06-28 17:49:29 -04:00
|
|
|
* @stable
|
2016-05-24 16:41:37 -04:00
|
|
|
*/
|
2016-05-23 19:14:23 -04:00
|
|
|
export class ActivatedRoute {
|
2016-06-02 17:44:57 -04:00
|
|
|
/** @internal */
|
|
|
|
_futureSnapshot: ActivatedRouteSnapshot;
|
|
|
|
snapshot: ActivatedRouteSnapshot;
|
|
|
|
|
2016-08-02 17:34:00 -04:00
|
|
|
/** @internal */
|
|
|
|
_routerState: RouterState;
|
|
|
|
|
2016-06-02 18:18:34 -04:00
|
|
|
/**
|
|
|
|
* @internal
|
|
|
|
*/
|
2016-06-08 14:13:41 -04:00
|
|
|
constructor(
|
2016-07-25 15:15:07 -04:00
|
|
|
public url: Observable<UrlSegment[]>, public params: Observable<Params>,
|
2016-08-02 18:31:56 -04:00
|
|
|
public queryParams: Observable<Params>, public fragment: Observable<string>,
|
2016-08-10 21:21:28 -04:00
|
|
|
public data: Observable<Data>, public outlet: string, public component: Type<any>|string,
|
2016-06-08 14:13:41 -04:00
|
|
|
futureSnapshot: ActivatedRouteSnapshot) {
|
2016-06-02 17:44:57 -04:00
|
|
|
this._futureSnapshot = futureSnapshot;
|
|
|
|
}
|
2016-06-09 17:11:54 -04:00
|
|
|
|
2016-07-28 19:39:01 -04:00
|
|
|
get routeConfig(): Route { return this._futureSnapshot.routeConfig; }
|
|
|
|
|
2016-08-07 23:09:04 -04:00
|
|
|
get root(): ActivatedRoute { return this._routerState.root; }
|
|
|
|
|
2016-08-02 17:34:00 -04:00
|
|
|
get parent(): ActivatedRoute { return this._routerState.parent(this); }
|
|
|
|
|
|
|
|
get firstChild(): ActivatedRoute { return this._routerState.firstChild(this); }
|
|
|
|
|
|
|
|
get children(): ActivatedRoute[] { return this._routerState.children(this); }
|
|
|
|
|
|
|
|
get pathFromRoot(): ActivatedRoute[] { return this._routerState.pathFromRoot(this); }
|
|
|
|
|
2016-06-09 17:11:54 -04:00
|
|
|
toString(): string {
|
|
|
|
return this.snapshot ? this.snapshot.toString() : `Future(${this._futureSnapshot})`;
|
|
|
|
}
|
2016-06-01 16:29:02 -04:00
|
|
|
}
|
|
|
|
|
2016-06-28 17:49:29 -04:00
|
|
|
/**
|
|
|
|
* @internal
|
|
|
|
*/
|
2016-06-27 17:00:07 -04:00
|
|
|
export class InheritedResolve {
|
|
|
|
/**
|
|
|
|
* @internal
|
|
|
|
*/
|
|
|
|
resolvedData = {};
|
|
|
|
|
|
|
|
constructor(public parent: InheritedResolve, public current: ResolveData) {}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @internal
|
|
|
|
*/
|
|
|
|
get flattenedResolvedData(): Data {
|
|
|
|
return this.parent ? merge(this.parent.flattenedResolvedData, this.resolvedData) :
|
|
|
|
this.resolvedData;
|
|
|
|
}
|
|
|
|
|
|
|
|
static get empty(): InheritedResolve { return new InheritedResolve(null, {}); }
|
|
|
|
}
|
|
|
|
|
2016-06-01 20:55:21 -04:00
|
|
|
/**
|
|
|
|
* Contains the information about a component loaded in an outlet at a particular moment in time.
|
|
|
|
*
|
|
|
|
* ### Usage
|
|
|
|
*
|
|
|
|
* ```
|
2016-08-30 18:57:24 -04:00
|
|
|
* @Component({template:''})
|
2016-06-01 20:55:21 -04:00
|
|
|
* class MyComponent {
|
|
|
|
* constructor(route: ActivatedRoute) {
|
|
|
|
* const id: string = route.snapshot.params.id;
|
2016-06-28 17:49:29 -04:00
|
|
|
* const data = route.snapshot.data;
|
2016-06-01 20:55:21 -04:00
|
|
|
* }
|
|
|
|
* }
|
|
|
|
* ```
|
2016-06-27 15:27:23 -04:00
|
|
|
*
|
2016-06-28 17:49:29 -04:00
|
|
|
* @stable
|
2016-06-01 20:55:21 -04:00
|
|
|
*/
|
|
|
|
export class ActivatedRouteSnapshot {
|
2016-06-01 16:29:02 -04:00
|
|
|
/** @internal **/
|
2016-06-15 12:14:41 -04:00
|
|
|
_routeConfig: Route;
|
2016-06-01 16:29:02 -04:00
|
|
|
|
2016-06-02 14:30:38 -04:00
|
|
|
/** @internal **/
|
2016-07-25 15:15:07 -04:00
|
|
|
_urlSegment: UrlSegmentGroup;
|
2016-06-14 17:55:59 -04:00
|
|
|
|
2016-06-20 14:48:08 -04:00
|
|
|
/** @internal */
|
2016-06-14 17:55:59 -04:00
|
|
|
_lastPathIndex: number;
|
2016-06-02 14:30:38 -04:00
|
|
|
|
2016-06-27 17:00:07 -04:00
|
|
|
/** @internal */
|
|
|
|
_resolve: InheritedResolve;
|
|
|
|
|
2016-08-02 17:34:00 -04:00
|
|
|
/** @internal */
|
|
|
|
_routerState: RouterStateSnapshot;
|
|
|
|
|
2016-06-02 18:18:34 -04:00
|
|
|
/**
|
|
|
|
* @internal
|
|
|
|
*/
|
2016-06-08 14:13:41 -04:00
|
|
|
constructor(
|
2016-08-02 18:31:56 -04:00
|
|
|
public url: UrlSegment[], public params: Params, public queryParams: Params,
|
|
|
|
public fragment: string, public data: Data, public outlet: string,
|
2016-08-10 21:21:28 -04:00
|
|
|
public component: Type<any>|string, routeConfig: Route, urlSegment: UrlSegmentGroup,
|
2016-07-25 15:15:07 -04:00
|
|
|
lastPathIndex: number, resolve: InheritedResolve) {
|
2016-06-01 16:29:02 -04:00
|
|
|
this._routeConfig = routeConfig;
|
2016-06-14 17:55:59 -04:00
|
|
|
this._urlSegment = urlSegment;
|
|
|
|
this._lastPathIndex = lastPathIndex;
|
2016-06-27 17:00:07 -04:00
|
|
|
this._resolve = resolve;
|
2016-06-01 16:29:02 -04:00
|
|
|
}
|
2016-06-09 17:11:54 -04:00
|
|
|
|
2016-07-28 19:39:01 -04:00
|
|
|
get routeConfig(): Route { return this._routeConfig; }
|
|
|
|
|
2016-08-07 23:09:04 -04:00
|
|
|
get root(): ActivatedRouteSnapshot { return this._routerState.root; }
|
|
|
|
|
2016-08-02 17:34:00 -04:00
|
|
|
get parent(): ActivatedRouteSnapshot { return this._routerState.parent(this); }
|
|
|
|
|
|
|
|
get firstChild(): ActivatedRouteSnapshot { return this._routerState.firstChild(this); }
|
|
|
|
|
|
|
|
get children(): ActivatedRouteSnapshot[] { return this._routerState.children(this); }
|
|
|
|
|
|
|
|
get pathFromRoot(): ActivatedRouteSnapshot[] { return this._routerState.pathFromRoot(this); }
|
|
|
|
|
2016-06-09 17:11:54 -04:00
|
|
|
toString(): string {
|
2016-06-14 17:55:59 -04:00
|
|
|
const url = this.url.map(s => s.toString()).join('/');
|
2016-06-09 17:11:54 -04:00
|
|
|
const matched = this._routeConfig ? this._routeConfig.path : '';
|
|
|
|
return `Route(url:'${url}', path:'${matched}')`;
|
|
|
|
}
|
2016-06-01 16:29:02 -04:00
|
|
|
}
|
|
|
|
|
2016-06-01 20:55:21 -04:00
|
|
|
/**
|
|
|
|
* The state of the router at a particular moment in time.
|
|
|
|
*
|
|
|
|
* ### Usage
|
|
|
|
*
|
|
|
|
* ```
|
2016-08-30 18:57:24 -04:00
|
|
|
* @Component({template:''})
|
2016-06-01 20:55:21 -04:00
|
|
|
* class MyComponent {
|
|
|
|
* constructor(router: Router) {
|
|
|
|
* const snapshot = router.routerState.snapshot;
|
|
|
|
* }
|
|
|
|
* }
|
|
|
|
* ```
|
2016-06-27 15:27:23 -04:00
|
|
|
*
|
2016-06-28 17:49:29 -04:00
|
|
|
* @stable
|
2016-06-01 20:55:21 -04:00
|
|
|
*/
|
|
|
|
export class RouterStateSnapshot extends Tree<ActivatedRouteSnapshot> {
|
2016-06-02 18:18:34 -04:00
|
|
|
/**
|
|
|
|
* @internal
|
|
|
|
*/
|
2016-08-02 18:31:56 -04:00
|
|
|
constructor(public url: string, root: TreeNode<ActivatedRouteSnapshot>) {
|
2016-06-01 16:29:02 -04:00
|
|
|
super(root);
|
2016-08-02 17:34:00 -04:00
|
|
|
setRouterStateSnapshot<RouterStateSnapshot, ActivatedRouteSnapshot>(this, root);
|
2016-06-01 16:29:02 -04:00
|
|
|
}
|
2016-06-09 17:11:54 -04:00
|
|
|
|
2016-06-09 17:33:09 -04:00
|
|
|
toString(): string { return serializeNode(this._root); }
|
2016-06-02 17:44:57 -04:00
|
|
|
}
|
|
|
|
|
2016-08-02 17:34:00 -04:00
|
|
|
function setRouterStateSnapshot<U, T extends{_routerState: U}>(state: U, node: TreeNode<T>): void {
|
|
|
|
node.value._routerState = state;
|
|
|
|
node.children.forEach(c => setRouterStateSnapshot(state, c));
|
|
|
|
}
|
|
|
|
|
2016-06-09 17:11:54 -04:00
|
|
|
function serializeNode(node: TreeNode<ActivatedRouteSnapshot>): string {
|
|
|
|
const c = node.children.length > 0 ? ` { ${node.children.map(serializeNode).join(", ")} } ` : '';
|
|
|
|
return `${node.value}${c}`;
|
|
|
|
}
|
|
|
|
|
2016-06-02 17:44:57 -04:00
|
|
|
/**
|
|
|
|
* The expectation is that the activate route is created with the right set of parameters.
|
|
|
|
* So we push new values into the observables only when they are not the initial values.
|
|
|
|
* And we detect that by checking if the snapshot field is set.
|
|
|
|
*/
|
|
|
|
export function advanceActivatedRoute(route: ActivatedRoute): void {
|
2016-06-24 15:23:42 -04:00
|
|
|
if (route.snapshot) {
|
2016-08-02 18:31:56 -04:00
|
|
|
if (!shallowEqual(route.snapshot.queryParams, route._futureSnapshot.queryParams)) {
|
|
|
|
(<any>route.queryParams).next(route._futureSnapshot.queryParams);
|
|
|
|
}
|
|
|
|
if (route.snapshot.fragment !== route._futureSnapshot.fragment) {
|
|
|
|
(<any>route.fragment).next(route._futureSnapshot.fragment);
|
|
|
|
}
|
2016-06-24 15:23:42 -04:00
|
|
|
if (!shallowEqual(route.snapshot.params, route._futureSnapshot.params)) {
|
|
|
|
(<any>route.params).next(route._futureSnapshot.params);
|
2016-06-27 17:00:07 -04:00
|
|
|
(<any>route.data).next(route._futureSnapshot.data);
|
2016-06-24 15:23:42 -04:00
|
|
|
}
|
|
|
|
if (!shallowEqualArrays(route.snapshot.url, route._futureSnapshot.url)) {
|
|
|
|
(<any>route.url).next(route._futureSnapshot.url);
|
|
|
|
}
|
2016-06-02 17:44:57 -04:00
|
|
|
route.snapshot = route._futureSnapshot;
|
|
|
|
} else {
|
|
|
|
route.snapshot = route._futureSnapshot;
|
2016-08-02 18:31:56 -04:00
|
|
|
|
|
|
|
// this is for resolved data
|
2016-06-27 17:00:07 -04:00
|
|
|
(<any>route.data).next(route._futureSnapshot.data);
|
2016-06-02 17:44:57 -04:00
|
|
|
}
|
2016-06-27 15:27:23 -04:00
|
|
|
}
|