fix(router): ignore null or undefined query parameters

angular · Oct 16, 2016 · a0914c3 · a0914c3
1 parent 33c8948
commit a0914c3
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 4 deletions.
diff --git a/modules/@angular/router/src/router.ts b/modules/@angular/router/src/router.ts
@@ -500,6 +500,9 @@ export class Router {
    */
   navigate(commands: any[], extras: NavigationExtras = {skipLocationChange: false}):
       Promise<boolean> {
+    if (typeof extras.queryParams === 'object' && extras.queryParams !== null) {
+      extras.queryParams = this.removeEmptyProps(extras.queryParams);
+    }
     return this.scheduleNavigation(this.createUrlTree(commands, extras), extras);
   }
 
@@ -525,6 +528,16 @@ export class Router {
     }
   }
 
+  private removeEmptyProps(params: Params): Params {
+    return Object.keys(params).reduce((result: Params, key: string) => {
+      const value: any = params[key];
+      if (value !== null && value !== undefined) {
+        result[key] = value;
+      }
+      return result;
+    }, {});
+  }
+
   private scheduleNavigation(url: UrlTree, extras: NavigationExtras): Promise<boolean> {
     const id = ++this.navigationId;
     this.routerEvents.next(new NavigationStart(id, this.serializeUrl(url)));

diff --git a/modules/@angular/router/test/integration.spec.ts b/modules/@angular/router/test/integration.spec.ts
@@ -322,6 +322,18 @@ describe('Integration', () => {
        expect(fixture.nativeElement).toHaveText('query: 2 fragment: fragment2');
      })));
 
+  it('should ignore null and undefined query params',
+     fakeAsync(inject([Router], (router: Router) => {
+       const fixture = createRoot(router, RootCmp);
+
+       router.resetConfig([{path: 'query', component: EmptyQueryParamsCmp}]);
+
+       router.navigate(['query'], {queryParams: {name: 1, age: null, page: undefined}});
+       advance(fixture);
+       const cmp = fixture.debugElement.children[1].componentInstance;
+       expect(cmp.recordedParams).toEqual([{name: '1'}]);
+     })));
+
   it('should push params only when they change', fakeAsync(inject([Router], (router: Router) => {
        const fixture = createRoot(router, RootCmp);
 
@@ -1874,6 +1886,15 @@ class QueryParamsAndFragmentCmp {
   }
 }
 
+@Component({selector: 'empty-query-cmp', template: ``})
+class EmptyQueryParamsCmp {
+  recordedParams: Params[] = [];
+
+  constructor(route: ActivatedRoute) {
+    route.queryParams.forEach(_ => this.recordedParams.push(_));
+  }
+}
+
 @Component({selector: 'route-cmp', template: `route`})
 class RouteCmp {
   constructor(public route: ActivatedRoute) {}
@@ -1966,7 +1987,8 @@ function createRoot(router: Router, type: any): ComponentFixture<any> {
     RouteCmp,
     RootCmp,
     RelativeLinkInIfCmp,
-    RootCmpWithTwoOutlets
+    RootCmpWithTwoOutlets,
+    EmptyQueryParamsCmp
   ],
 
 
@@ -1990,7 +2012,8 @@ function createRoot(router: Router, type: any): ComponentFixture<any> {
     RouteCmp,
     RootCmp,
     RelativeLinkInIfCmp,
-    RootCmpWithTwoOutlets
+    RootCmpWithTwoOutlets,
+    EmptyQueryParamsCmp
   ],
 
 
@@ -2015,8 +2038,9 @@ function createRoot(router: Router, type: any): ComponentFixture<any> {
     RouteCmp,
     RootCmp,
     RelativeLinkInIfCmp,
-    RootCmpWithTwoOutlets
+    RootCmpWithTwoOutlets,
+    EmptyQueryParamsCmp
   ]
 })
 class TestModule {
-}
+}