import { ComponentResolver, ReflectiveInjector, Type } from '@angular/core'; import { Location } from '@angular/common'; import { UrlSerializer } from './url_serializer'; import { RouterOutletMap } from './router_outlet_map'; import { recognize } from './recognize'; import { rootNode, TreeNode } from './utils/tree'; import { UrlTree, createEmptyUrlTree } from './url_tree'; import { PRIMARY_OUTLET, Params } from './shared'; import { createEmptyState, RouterState, ActivatedRoute} from './router_state'; import { RouterConfig } from './config'; import { RouterOutlet } from './directives/router_outlet'; import { createUrlTree } from './create_url_tree'; import { forEach } from './utils/collection'; import { Observable } from 'rxjs/Observable'; import { Subscription } from 'rxjs/Subscription'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/mergeMap'; import 'rxjs/add/operator/toPromise'; import {fromPromise} from 'rxjs/observable/fromPromise'; import {forkJoin} from 'rxjs/observable/forkJoin'; export interface NavigationExtras { relativeTo?: ActivatedRoute; queryParameters?: Params; fragment?: string; } /** * The `Router` is responsible for mapping URLs to components. */ export class Router { private currentUrlTree: UrlTree; private currentRouterState: RouterState; private config: RouterConfig; private locationSubscription: Subscription; /** * @internal */ constructor(private roorComponentType:Type, private resolver: ComponentResolver, private urlSerializer: UrlSerializer, private outletMap: RouterOutletMap, private location: Location) { this.currentUrlTree = createEmptyUrlTree(); this.currentRouterState = createEmptyState(roorComponentType); this.setUpLocationChangeListener(); this.navigateByUrl(this.location.path()); } /** * Returns the current route state. */ get routerState(): RouterState { return this.currentRouterState; } /** * Returns the current url tree. */ get urlTree(): UrlTree { return this.currentUrlTree; } /** * Navigate based on the provided url. This navigation is always absolute. * * ### Usage * * ``` * router.navigateByUrl("/team/33/user/11"); * ``` */ navigateByUrl(url: string): Observable { const urlTree = this.urlSerializer.parse(url); return this.runNavigate(urlTree, false); } /** * Resets the configuration used for navigation and generating links. * * ### Usage * * ``` * router.resetConfig([ * { path: 'team/:id', component: TeamCmp, children: [ * { path: 'simple', component: SimpleCmp }, * { path: 'user/:name', component: UserCmp } * ] } * ]); * ``` */ resetConfig(config: RouterConfig): void { this.config = config; } /** * @internal */ dispose(): void { this.locationSubscription.unsubscribe(); } /** * Applies an array of commands to the current url tree and creates * a new url tree. * * When given an activate route, applies the given commands starting from the route. * When not given a route, applies the given command starting from the root. * * ### Usage * * ``` * // create /team/33/user/11 * router.createUrlTree(['/team', 33, 'user', 11]); * * // create /team/33;expand=true/user/11 * router.createUrlTree(['/team', 33, {expand: true}, 'user', 11]); * * // you can collapse static fragments like this * router.createUrlTree(['/team/33/user', userId]); * * // assuming the current url is `/team/33/user/11` and the route points to `user/11` * * // navigate to /team/33/user/11/details * router.createUrlTree(['details'], {relativeTo: route}); * * // navigate to /team/33/user/22 * router.createUrlTree(['../22'], {relativeTo: route}); * * // navigate to /team/44/user/22 * router.createUrlTree(['../../team/44/user/22'], {relativeTo: route}); * ``` */ createUrlTree(commands: any[], {relativeTo, queryParameters, fragment}: NavigationExtras = {}): UrlTree { const a = relativeTo ? relativeTo : this.routerState.root; return createUrlTree(a, this.currentUrlTree, commands, queryParameters, fragment); } /** * Navigate based on the provided array of commands and a starting point. * If no starting route is provided, the navigation is absolute. * * ### Usage * * ``` * router.navigate(['team', 33, 'team', '11], {relativeTo: route}); * ``` */ navigate(commands: any[], extras: NavigationExtras = {}): Observable { return this.runNavigate(this.createUrlTree(commands, extras)); } /** * Serializes a {@link UrlTree} into a string. */ serializeUrl(url: UrlTree): string { return this.urlSerializer.serialize(url); } /** * Parse a string into a {@link UrlTree}. */ parseUrl(url: string): UrlTree { return this.urlSerializer.parse(url); } private setUpLocationChangeListener(): void { this.locationSubscription = this.location.subscribe((change) => { this.runNavigate(this.urlSerializer.parse(change['url']), change['pop']) }); } private runNavigate(url:UrlTree, pop?:boolean):Observable { const r = recognize(this.config, url, this.currentRouterState).mergeMap((newState:RouterState) => { return new ActivateRoutes(this.resolver, newState, this.currentRouterState).activate(this.outletMap).map(() => { this.currentUrlTree = url; this.currentRouterState = newState; if (!pop) { this.location.go(this.urlSerializer.serialize(url)); } }); }); r.subscribe((a) => {}, (e) => {}, () => {}); // force execution return r; } } class ActivateRoutes { constructor(private resolver: ComponentResolver, private futureState: RouterState, private currState: RouterState) {} activate(parentOutletMap: RouterOutletMap): Observable { const currRoot = this.currState ? rootNode(this.currState) : null; const futureRoot = rootNode(this.futureState); return this.activateChildRoutes(futureRoot, currRoot, parentOutletMap); } private activateChildRoutes(futureNode: TreeNode, currNode: TreeNode | null, outletMap: RouterOutletMap): Observable { const prevChildren = nodeChildrenAsMap(currNode); const observables = []; futureNode.children.forEach(c => { observables.push(this.activateRoutes(c, prevChildren[c.value.outlet], outletMap).toPromise()); delete prevChildren[c.value.outlet]; }); forEach(prevChildren, (v, k) => this.deactivateOutletAndItChildren(outletMap._outlets[k])); return forkJoin(observables); } activateRoutes(futureNode: TreeNode, currNode: TreeNode, parentOutletMap: RouterOutletMap): Observable { const future = futureNode.value; const curr = currNode ? currNode.value : null; const outlet = getOutlet(parentOutletMap, futureNode.value); if (future === curr) { return this.activateChildRoutes(futureNode, currNode, outlet.outletMap); } else { this.deactivateOutletAndItChildren(outlet); const outletMap = new RouterOutletMap(); return this.activateNewRoutes(outletMap, future, outlet).mergeMap(() => this.activateChildRoutes(futureNode, currNode, outletMap)); } } private activateNewRoutes(outletMap: RouterOutletMap, future: ActivatedRoute, outlet: RouterOutlet): Observable { const resolved = ReflectiveInjector.resolve([ {provide: ActivatedRoute, useValue: future}, {provide: RouterOutletMap, useValue: outletMap} ]); return fromPromise(this.resolver.resolveComponent(future.component)). map(factory => outlet.activate(factory, resolved, outletMap)); } private deactivateOutletAndItChildren(outlet: RouterOutlet): void { if (outlet && outlet.isActivated) { forEach(outlet.outletMap._outlets, (v, k) => this.deactivateOutletAndItChildren(v)); outlet.deactivate(); } } } function nodeChildrenAsMap(node: TreeNode|null) { return node ? node.children.reduce( (m, c) => { m[c.value.outlet] = c; return m; }, {}) : {}; } function getOutlet(outletMap: RouterOutletMap, route: ActivatedRoute): RouterOutlet { let outlet = outletMap._outlets[route.outlet]; if (!outlet) { if (route.outlet === PRIMARY_OUTLET) { throw new Error(`Cannot find primary outlet`); } else { throw new Error(`Cannot find the outlet ${route.outlet}`); } } return outlet; }