From ab958598d70eb01b6cb1e9d6b92bb6804cebc4f3 Mon Sep 17 00:00:00 2001 From: vsavkin Date: Thu, 2 Jun 2016 14:44:57 -0700 Subject: [PATCH] feat(router): implement CandDeactivate --- modules/@angular/router/src/config.ts | 1 + .../router/src/create_router_state.ts | 2 +- .../router/src/directives/router_outlet.ts | 6 +- modules/@angular/router/src/index.ts | 2 +- modules/@angular/router/src/router.ts | 63 ++++++++++++------- modules/@angular/router/src/router_state.ts | 27 +++++++- .../router/test/create_router_state.spec.ts | 13 +++- .../router/test/create_url_tree.spec.ts | 8 ++- modules/@angular/router/test/router.spec.ts | 44 ++++++++++++- 9 files changed, 132 insertions(+), 34 deletions(-) diff --git a/modules/@angular/router/src/config.ts b/modules/@angular/router/src/config.ts index 41b603db0a..6b7086d811 100644 --- a/modules/@angular/router/src/config.ts +++ b/modules/@angular/router/src/config.ts @@ -8,5 +8,6 @@ export interface Route { component: Type | string; outlet?: string; canActivate?: any[], + canDeactivate?: any[], children?: Route[]; } \ No newline at end of file diff --git a/modules/@angular/router/src/create_router_state.ts b/modules/@angular/router/src/create_router_state.ts index 25900f3ae6..178fc13f7a 100644 --- a/modules/@angular/router/src/create_router_state.ts +++ b/modules/@angular/router/src/create_router_state.ts @@ -12,7 +12,7 @@ export function createRouterState(curr: RouterStateSnapshot, prevState: RouterSt function createNode(curr:TreeNode, prevState?:TreeNode):TreeNode { if (prevState && equalRouteSnapshots(prevState.value.snapshot, curr.value)) { const value = prevState.value; - value.snapshot = curr.value; + value._futureSnapshot = curr.value; const children = createOrReuseChildren(curr, prevState); return new TreeNode(value, children); diff --git a/modules/@angular/router/src/directives/router_outlet.ts b/modules/@angular/router/src/directives/router_outlet.ts index 9ee76c1122..4fb9857621 100644 --- a/modules/@angular/router/src/directives/router_outlet.ts +++ b/modules/@angular/router/src/directives/router_outlet.ts @@ -13,7 +13,11 @@ export class RouterOutlet { } get isActivated(): boolean { return !!this.activated; } - + get component(): Object { + if (!this.activated) throw new Error("Outlet is not activated"); + return this.activated.instance; + } + deactivate(): void { if (this.activated) { this.activated.destroy(); diff --git a/modules/@angular/router/src/index.ts b/modules/@angular/router/src/index.ts index 2b67c92741..3321a15c7c 100644 --- a/modules/@angular/router/src/index.ts +++ b/modules/@angular/router/src/index.ts @@ -1,6 +1,6 @@ export { Router } from './router'; export { UrlSerializer, DefaultUrlSerializer } from './url_serializer'; -export { RouterState, ActivatedRoute } from './router_state'; +export { RouterState, ActivatedRoute, RouterStateSnapshot, ActivatedRouteSnapshot } from './router_state'; export { UrlTree, UrlSegment} from './url_tree'; export { RouterOutletMap } from './router_outlet_map'; export { RouterConfig, Route } from './config'; diff --git a/modules/@angular/router/src/router.ts b/modules/@angular/router/src/router.ts index e7b4a6af21..9cf4ee21c2 100644 --- a/modules/@angular/router/src/router.ts +++ b/modules/@angular/router/src/router.ts @@ -8,7 +8,7 @@ import { createRouterState } from './create_router_state'; import { TreeNode } from './utils/tree'; import { UrlTree, createEmptyUrlTree } from './url_tree'; import { PRIMARY_OUTLET, Params } from './shared'; -import { createEmptyState, RouterState, RouterStateSnapshot, ActivatedRoute, ActivatedRouteSnapshot} from './router_state'; +import { createEmptyState, RouterState, RouterStateSnapshot, ActivatedRoute, ActivatedRouteSnapshot, advanceActivatedRoute} from './router_state'; import { RouterConfig } from './config'; import { RouterOutlet } from './directives/router_outlet'; import { createUrlTree } from './create_url_tree'; @@ -190,6 +190,9 @@ export class Router { } } +class CanActivate { constructor(public route: ActivatedRouteSnapshot) {}} +class CanDeactivate { constructor(public component: Object, public route: ActivatedRouteSnapshot) {}} + class GuardChecks { private checks = []; constructor(private future: RouterStateSnapshot, private curr: RouterStateSnapshot, private injector: Injector) {} @@ -199,38 +202,52 @@ class GuardChecks { const currRoot = this.curr ? this.curr._root : null; this.traverseChildRoutes(futureRoot, currRoot, parentOutletMap); if (this.checks.length === 0) return of(true); - return forkJoin(this.checks.map(s => this.runCanActivate(s))).map(and); + return forkJoin(this.checks.map(s => { + if (s instanceof CanActivate) { + return this.runCanActivate(s.route) + } else if (s instanceof CanDeactivate) { + return this.runCanDeactivate(s.component, s.route); + } else { + throw new Error("Cannot be reached"); + } + })).map(and); } private traverseChildRoutes(futureNode: TreeNode, currNode: TreeNode | null, - outletMap: RouterOutletMap): void { + outletMap: RouterOutletMap | null): void { const prevChildren = nodeChildrenAsMap(currNode); futureNode.children.forEach(c => { this.traverseRoutes(c, prevChildren[c.value.outlet], outletMap); delete prevChildren[c.value.outlet]; }); - forEach(prevChildren, (v, k) => this.deactivateOutletAndItChildren(outletMap._outlets[k])); + forEach(prevChildren, (v, k) => this.deactivateOutletAndItChildren(v, outletMap._outlets[k])); } traverseRoutes(futureNode: TreeNode, currNode: TreeNode | null, - parentOutletMap: RouterOutletMap): void { + parentOutletMap: RouterOutletMap | null): void { const future = futureNode.value; const curr = currNode ? currNode.value : null; + const outlet = parentOutletMap ? parentOutletMap._outlets[futureNode.value.outlet] : null; - if (curr && future === curr) { + if (curr && future._routeConfig === curr._routeConfig) { if (!shallowEqual(future.params, curr.params)) { - this.checks.push(future); + this.checks.push(new CanDeactivate(outlet.component, curr), new CanActivate(future)); } - this.traverseChildRoutes(futureNode, currNode, null); + this.traverseChildRoutes(futureNode, currNode, outlet ? outlet.outletMap : null); } else { - this.deactivateOutletAndItChildren(null); - this.checks.push(future); - this.traverseChildRoutes(futureNode, null, null); + this.deactivateOutletAndItChildren(curr, outlet); + this.checks.push(new CanActivate(future)); + this.traverseChildRoutes(futureNode, null, outlet ? outlet.outletMap : null); } } - private deactivateOutletAndItChildren(outlet: RouterOutlet): void {} + private deactivateOutletAndItChildren(route: ActivatedRouteSnapshot, outlet: RouterOutlet): void { + if (outlet && outlet.isActivated) { + forEach(outlet.outletMap._outlets, (v, k) => this.deactivateOutletAndItChildren(v, outlet.outletMap._outlets[k])); + this.checks.push(new CanDeactivate(outlet.component, route)) + } + } private runCanActivate(future: ActivatedRouteSnapshot): Observable { const canActivate = future._routeConfig ? future._routeConfig.canActivate : null; @@ -240,6 +257,15 @@ class GuardChecks { return of(guard(future, this.future)); })).map(and); } + + private runCanDeactivate(component: Object, curr: ActivatedRouteSnapshot): Observable { + const canDeactivate = curr._routeConfig ? curr._routeConfig.canDeactivate : null; + if (!canDeactivate || canDeactivate.length === 0) return of(true); + return forkJoin(canDeactivate.map(c => { + const guard = this.injector.get(c); + return of(guard(component, curr, this.curr)); + })).map(and); + } } class ActivateRoutes { @@ -271,7 +297,7 @@ class ActivateRoutes { const outlet = getOutlet(parentOutletMap, futureNode.value); if (future === curr) { - pushValues(future); + advanceActivatedRoute(future); this.activateChildRoutes(futureNode, currNode, outlet.outletMap); } else { this.deactivateOutletAndItChildren(outlet); @@ -286,8 +312,8 @@ class ActivateRoutes { {provide: ActivatedRoute, useValue: future}, {provide: RouterOutletMap, useValue: outletMap} ]); - outlet.activate(future.snapshot._resolvedComponentFactory, resolved, outletMap); - pushValues(future); + outlet.activate(future._futureSnapshot._resolvedComponentFactory, resolved, outletMap); + advanceActivatedRoute(future); } private deactivateOutletAndItChildren(outlet: RouterOutlet): void { @@ -298,13 +324,6 @@ class ActivateRoutes { } } -function pushValues(route: ActivatedRoute): void { - if (!shallowEqual(route.snapshot.params, (route.params).value)) { - (route.urlSegments).next(route.snapshot.urlSegments); - (route.params).next(route.snapshot.params); - } -} - function pushQueryParamsAndFragment(state: RouterState): void { if (!shallowEqual(state.snapshot.queryParams, (state.queryParams).value)) { (state.queryParams).next(state.snapshot.queryParams); diff --git a/modules/@angular/router/src/router_state.ts b/modules/@angular/router/src/router_state.ts index 324e1c8abb..79e97cd321 100644 --- a/modules/@angular/router/src/router_state.ts +++ b/modules/@angular/router/src/router_state.ts @@ -1,4 +1,5 @@ import { Tree, TreeNode } from './utils/tree'; +import { shallowEqual } from './utils/collection'; import { UrlSegment } from './url_tree'; import { Route } from './config'; import { Params, PRIMARY_OUTLET } from './shared'; @@ -34,6 +35,7 @@ export function createEmptyState(rootComponent: Type): RouterState { const emptyQueryParams = new BehaviorSubject({}); const fragment = new BehaviorSubject(""); const activated = new ActivatedRoute(emptyUrl, emptyParams, PRIMARY_OUTLET, rootComponent, snapshot.root); + activated.snapshot = snapshot.root; return new RouterState(new TreeNode(activated, []), emptyQueryParams, fragment, snapshot); } @@ -62,12 +64,18 @@ function createEmptyStateSnapshot(rootComponent: Type): RouterStateSnapshot { * ``` */ export class ActivatedRoute { + /** @internal */ + _futureSnapshot: ActivatedRouteSnapshot; + snapshot: ActivatedRouteSnapshot; + constructor(public urlSegments: Observable, public params: Observable, public outlet: string, public component: Type | string, - public snapshot: ActivatedRouteSnapshot - ) {} + futureSnapshot: ActivatedRouteSnapshot + ) { + this._futureSnapshot = futureSnapshot; + } } /** @@ -123,4 +131,19 @@ export class RouterStateSnapshot extends Tree { constructor(root: TreeNode, public queryParams: Params, public fragment: string | null) { super(root); } +} + +/** + * 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 { + if (route.snapshot && !shallowEqual(route.snapshot.params, route._futureSnapshot.params)) { + route.snapshot = route._futureSnapshot; + (route.urlSegments).next(route.snapshot.urlSegments); + (route.params).next(route.snapshot.params); + } else { + route.snapshot = route._futureSnapshot; + } } \ No newline at end of file diff --git a/modules/@angular/router/test/create_router_state.spec.ts b/modules/@angular/router/test/create_router_state.spec.ts index d6b02d8ea8..1536f33a59 100644 --- a/modules/@angular/router/test/create_router_state.spec.ts +++ b/modules/@angular/router/test/create_router_state.spec.ts @@ -1,7 +1,8 @@ import {DefaultUrlSerializer} from '../src/url_serializer'; import {UrlTree} from '../src/url_tree'; +import {TreeNode} from '../src/utils/tree'; import {Params, PRIMARY_OUTLET} from '../src/shared'; -import {ActivatedRoute, ActivatedRouteSnapshot, RouterStateSnapshot, createEmptyState} from '../src/router_state'; +import {ActivatedRoute, RouterState, RouterStateSnapshot, createEmptyState, advanceActivatedRoute} from '../src/router_state'; import {createRouterState} from '../src/create_router_state'; import {recognize} from '../src/recognize'; import {RouterConfig} from '../src/config'; @@ -32,6 +33,7 @@ describe('create router state', () => { ]; const prevState = createRouterState(createState(config, "a(left:b)"), emptyState()); + advanceState(prevState); const state = createRouterState(createState(config, "a(left:c)"), prevState); expect(prevState.root).toBe(state.root); @@ -44,6 +46,15 @@ describe('create router state', () => { }); }); +function advanceState(state: RouterState): void { + advanceNode(state._root); +} + +function advanceNode(node: TreeNode): void { + advanceActivatedRoute(node.value); + node.children.forEach(advanceNode); +} + function createState(config: RouterConfig, url: string): RouterStateSnapshot { let res; recognize(RootComponent, config, tree(url)).forEach(s => res = s); diff --git a/modules/@angular/router/test/create_url_tree.spec.ts b/modules/@angular/router/test/create_url_tree.spec.ts index 01bdf628fe..8973180a49 100644 --- a/modules/@angular/router/test/create_url_tree.spec.ts +++ b/modules/@angular/router/test/create_url_tree.spec.ts @@ -1,8 +1,9 @@ import {DefaultUrlSerializer} from '../src/url_serializer'; import {UrlTree, UrlSegment} from '../src/url_tree'; -import {ActivatedRoute, ActivatedRouteSnapshot} from '../src/router_state'; +import {ActivatedRoute, ActivatedRouteSnapshot, advanceActivatedRoute} from '../src/router_state'; import {PRIMARY_OUTLET, Params} from '../src/shared'; import {createUrlTree} from '../src/create_url_tree'; +import {BehaviorSubject} from 'rxjs/BehaviorSubject'; describe('createUrlTree', () => { const serializer = new DefaultUrlSerializer(); @@ -174,7 +175,8 @@ function create(start: UrlSegment | null, tree: UrlTree, commands: any[], queryP if (!start) { expect(start).toBeDefined(); } - const s = new ActivatedRouteSnapshot([], null, PRIMARY_OUTLET, "someComponent", null, start); - const a = new ActivatedRoute(null, null, PRIMARY_OUTLET, "someComponent", s); + const s = new ActivatedRouteSnapshot([], {}, PRIMARY_OUTLET, "someComponent", null, start); + const a = new ActivatedRoute(new BehaviorSubject(null), new BehaviorSubject(null), PRIMARY_OUTLET, "someComponent", s); + advanceActivatedRoute(a); return createUrlTree(a, tree, commands, queryParameters, fragment); } \ No newline at end of file diff --git a/modules/@angular/router/test/router.spec.ts b/modules/@angular/router/test/router.spec.ts index d26c394d0f..4ae8b78ece 100644 --- a/modules/@angular/router/test/router.spec.ts +++ b/modules/@angular/router/test/router.spec.ts @@ -2,6 +2,7 @@ import {Component, Injector} from '@angular/core'; import { describe, ddescribe, + xdescribe, it, iit, xit, @@ -16,7 +17,8 @@ import { import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing'; import { ComponentResolver } from '@angular/core'; import { SpyLocation } from '@angular/common/testing'; -import { UrlSerializer, DefaultUrlSerializer, RouterOutletMap, Router, ActivatedRoute, ROUTER_DIRECTIVES, Params } from '../src/index'; +import { UrlSerializer, DefaultUrlSerializer, RouterOutletMap, Router, ActivatedRoute, ROUTER_DIRECTIVES, Params, + RouterStateSnapshot, ActivatedRouteSnapshot } from '../src/index'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; @@ -328,7 +330,7 @@ describe("Integration", () => { describe("should activate a route when CanActivate returns true", () => { beforeEachProviders(() => [ - {provide: 'alwaysFalse', useValue: (a, b) => true} + {provide: 'alwaysFalse', useValue: (a:ActivatedRouteSnapshot, s:RouterStateSnapshot) => true} ]); it('works', @@ -347,6 +349,42 @@ describe("Integration", () => { }))); }); }); + + describe("CanDeactivate", () => { + describe("should not deactivate a route when CanDeactivate returns false", () => { + beforeEachProviders(() => [ + {provide: 'CanDeactivate', useValue: (c:TeamCmp, a:ActivatedRouteSnapshot, b:RouterStateSnapshot) => { + return c.route.snapshot.params['id'] === "22"; + }} + ]); + + + it('works', + fakeAsync(inject([Router, TestComponentBuilder, Location], (router, tcb, location) => { + router.resetConfig([ + { path: 'team/:id', component: TeamCmp, canDeactivate: ["CanDeactivate"] } + ]); + + const fixture = tcb.createFakeAsync(RootCmp); + advance(fixture); + + router.navigateByUrl('/team/22'); + advance(fixture); + + expect(location.path()).toEqual('/team/22'); + + router.navigateByUrl('/team/33'); + advance(fixture); + + expect(location.path()).toEqual('/team/33'); + + router.navigateByUrl('/team/44'); + advance(fixture); + + expect(location.path()).toEqual('/team/33'); + }))); + }); + }); }); }); @@ -388,7 +426,7 @@ class TeamCmp { id: Observable; recordedParams: Params[] = []; - constructor(route: ActivatedRoute) { + constructor(public route: ActivatedRoute) { this.id = route.params.map(p => p['id']); route.params.forEach(_ => this.recordedParams.push(_)); }