fix(router): Route.isActive also compares query params (#12321)

modules/@angular/router/src/url_tree.ts

@@ -15,12 +15,19 @@ export function createEmptyUrlTree() {
 
 export function containsTree(container: UrlTree, containee: UrlTree, exact: boolean): boolean {
   if (exact) {
-    return equalSegmentGroups(container.root, containee.root);
+    return equalQueryParams(container.queryParams, containee.queryParams) &&
+        equalSegmentGroups(container.root, containee.root);
   } else {
-    return containsSegmentGroup(container.root, containee.root);
+    return containsQueryParams(container.queryParams, containee.queryParams) &&
+        containsSegmentGroup(container.root, containee.root);
   }
 }
 
+function equalQueryParams(
+    container: {[k: string]: string}, containee: {[k: string]: string}): boolean {
+  return shallowEqual(container, containee);
+}
+
 function equalSegmentGroups(container: UrlSegmentGroup, containee: UrlSegmentGroup): boolean {
   if (!equalPath(container.segments, containee.segments)) return false;
   if (container.numberOfChildren !== containee.numberOfChildren) return false;
@@ -31,6 +38,12 @@ function equalSegmentGroups(container: UrlSegmentGroup, containee: UrlSegmentGro
   return true;
 }
 
+function containsQueryParams(
+    container: {[k: string]: string}, containee: {[k: string]: string}): boolean {
+  return Object.keys(containee) <= Object.keys(container) &&
+      Object.keys(containee).every(key => containee[key] === container[key]);
+}
+
 function containsSegmentGroup(container: UrlSegmentGroup, containee: UrlSegmentGroup): boolean {
   return containsSegmentGroupHelper(container, containee, containee.segments);
 }

modules/@angular/router/test/url_tree.spec.ts

@@ -21,6 +21,24 @@ describe('UrlTree', () => {
         expect(containsTree(t2, t1, true)).toBe(true);
       });
 
+      it('should return true when queryParams are the same', () => {
+        const t1 = serializer.parse('/one/two?test=1&page=5');
+        const t2 = serializer.parse('/one/two?test=1&page=5');
+        expect(containsTree(t1, t2, true)).toBe(true);
+      });
+
+      it('should return false when queryParams are not the same', () => {
+        const t1 = serializer.parse('/one/two?test=1&page=5');
+        const t2 = serializer.parse('/one/two?test=1');
+        expect(containsTree(t1, t2, true)).toBe(false);
+      });
+
+      it('should return false when containee is missing queryParams', () => {
+        const t1 = serializer.parse('/one/two?page=5');
+        const t2 = serializer.parse('/one/two');
+        expect(containsTree(t1, t2, true)).toBe(false);
+      });
+
       it('should return false when paths are not the same', () => {
         const t1 = serializer.parse('/one/two(right:three)');
         const t2 = serializer.parse('/one/two2(right:three)');
@@ -65,7 +83,7 @@ describe('UrlTree', () => {
         expect(containsTree(t1, t2, false)).toBe(false);
       });
 
-      it('should return containee has segments that the container does not have', () => {
+      it('should return false containee has segments that the container does not have', () => {
         const t1 = serializer.parse('/one/(two//left:three)');
         const t2 = serializer.parse('/one/(two//right:four)');
         expect(containsTree(t1, t2, false)).toBe(false);
@@ -76,6 +94,42 @@ describe('UrlTree', () => {
         const t2 = serializer.parse('/one/two');
         expect(containsTree(t1, t2, false)).toBe(false);
       });
+
+      it('should return true when queryParams are the same', () => {
+        const t1 = serializer.parse('/one/two?test=1&page=5');
+        const t2 = serializer.parse('/one/two?test=1&page=5');
+        expect(containsTree(t1, t2, false)).toBe(true);
+      });
+
+      it('should return true when container contains containees queryParams', () => {
+        const t1 = serializer.parse('/one/two?test=1&page=5');
+        const t2 = serializer.parse('/one/two?test=1');
+        expect(containsTree(t1, t2, false)).toBe(true);
+      });
+
+      it('should return true when containee does not have queryParams', () => {
+        const t1 = serializer.parse('/one/two?page=5');
+        const t2 = serializer.parse('/one/two');
+        expect(containsTree(t1, t2, false)).toBe(true);
+      });
+
+      it('should return false when containee has but container does not have queryParams', () => {
+        const t1 = serializer.parse('/one/two');
+        const t2 = serializer.parse('/one/two?page=1');
+        expect(containsTree(t1, t2, false)).toBe(false);
+      });
+
+      it('should return false when containee has different queryParams', () => {
+        const t1 = serializer.parse('/one/two?page=5');
+        const t2 = serializer.parse('/one/two?test=1');
+        expect(containsTree(t1, t2, false)).toBe(false);
+      });
+
+      it('should return false when containee has more queryParams than container', () => {
+        const t1 = serializer.parse('/one/two?page=5');
+        const t2 = serializer.parse('/one/two?page=5&test=1');
+        expect(containsTree(t1, t2, false)).toBe(false);
+      });
     });
   });
-});
+});