feat(router): add an extra argument to CanDeactivate interface

Adds next state argument so it will be possible to access future url inside a guard. Closes #9853
angular · Dec 20, 2016 · f8d1445 · f8d1445
1 parent 0e3981a
commit f8d1445
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 8 deletions.
diff --git a/modules/@angular/router/src/interfaces.ts b/modules/@angular/router/src/interfaces.ts
@@ -185,8 +185,9 @@ export interface CanActivateChild {
  *
  *   canDeactivate(
  *     component: TeamComponent,
- *     route: ActivatedRouteSnapshot,
- *     state: RouterStateSnapshot
+ *     currentRoute: ActivatedRouteSnapshot,
+ *     currentState: RouterStateSnapshot,
+ *     nextState: RouterStateSnapshot
  *   ): Observable<boolean>|Promise<boolean>|boolean {
  *     return this.permissions.canDeactivate(this.currentUser, route.params.id);
  *   }
@@ -223,7 +224,8 @@ export interface CanActivateChild {
  *   providers: [
  *     {
  *       provide: 'canDeactivateTeam',
- *       useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => true
+ *       useValue: (component: TeamComponent, currentRoute: ActivatedRouteSnapshot, currentState:
+ * RouterStateSnapshot, nextState: RouterStateSnapshot) => true
  *     }
  *   ]
  * })
@@ -233,8 +235,9 @@ export interface CanActivateChild {
  * @stable
  */
 export interface CanDeactivate<T> {
-  canDeactivate(component: T, route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
-      Observable<boolean>|Promise<boolean>|boolean;
+  canDeactivate(
+      component: T, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot,
+      nextState?: RouterStateSnapshot): Observable<boolean>|Promise<boolean>|boolean;
 }
 
 /**

diff --git a/modules/@angular/router/src/router.ts b/modules/@angular/router/src/router.ts
@@ -977,9 +977,10 @@ export class PreActivation {
       const guard = this.getToken(c, curr);
       let observable: Observable<boolean>;
       if (guard.canDeactivate) {
-        observable = wrapIntoObservable(guard.canDeactivate(component, curr, this.curr));
+        observable =
+            wrapIntoObservable(guard.canDeactivate(component, curr, this.curr, this.future));
       } else {
-        observable = wrapIntoObservable(guard(component, curr, this.curr));
+        observable = wrapIntoObservable(guard(component, curr, this.curr, this.future));
       }
       return first.call(observable);
     });

diff --git a/modules/@angular/router/test/integration.spec.ts b/modules/@angular/router/test/integration.spec.ts
@@ -1590,6 +1590,69 @@ describe('Integration', () => {
              expect(location.path()).toEqual('/simple');
            })));
 
+        describe('next state', () => {
+          let log: string[];
+
+          class ClassWithNextState implements CanDeactivate<TeamCmp> {
+            canDeactivate(
+                component: TeamCmp, currentRoute: ActivatedRouteSnapshot,
+                currentState: RouterStateSnapshot, nextState: RouterStateSnapshot): boolean {
+              log.push(currentState.url, nextState.url);
+              return true;
+            }
+          }
+
+          beforeEach(() => {
+            log = [];
+            TestBed.configureTestingModule({
+              providers: [
+                ClassWithNextState, {
+                  provide: 'FunctionWithNextState',
+                  useValue: (cmp: any, currentRoute: ActivatedRouteSnapshot,
+                             currentState: RouterStateSnapshot, nextState: RouterStateSnapshot) => {
+                    log.push(currentState.url, nextState.url);
+                    return true;
+                  }
+                }
+              ]
+            });
+          });
+
+          it('should pass next state as the 4 argument when guard is a class',
+             fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+               const fixture = createRoot(router, RootCmp);
+
+               router.resetConfig(
+                   [{path: 'team/:id', component: TeamCmp, canDeactivate: [ClassWithNextState]}]);
+
+               router.navigateByUrl('/team/22');
+               advance(fixture);
+               expect(location.path()).toEqual('/team/22');
+
+               router.navigateByUrl('/team/33');
+               advance(fixture);
+               expect(location.path()).toEqual('/team/33');
+               expect(log).toEqual(['/team/22', '/team/33']);
+             })));
+
+          it('should pass next state as the 4 argument when guard is a function',
+             fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
+               const fixture = createRoot(router, RootCmp);
+
+               router.resetConfig([
+                 {path: 'team/:id', component: TeamCmp, canDeactivate: ['FunctionWithNextState']}
+               ]);
+
+               router.navigateByUrl('/team/22');
+               advance(fixture);
+               expect(location.path()).toEqual('/team/22');
+
+               router.navigateByUrl('/team/33');
+               advance(fixture);
+               expect(location.path()).toEqual('/team/33');
+               expect(log).toEqual(['/team/22', '/team/33']);
+             })));
+        });
 
         describe('should work when given a class', () => {
           class AlwaysTrue implements CanDeactivate<TeamCmp> {

diff --git a/tools/public_api_guard/router/index.d.ts b/tools/public_api_guard/router/index.d.ts
@@ -47,7 +47,7 @@ export interface CanActivateChild {
 
 /** @stable */
 export interface CanDeactivate<T> {
-    canDeactivate(component: T, route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean;
+    canDeactivate(component: T, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean;
 }
 
 /** @stable */