From f7a0e9ecb6b04c08b2f34b306d4ed34475af45f6 Mon Sep 17 00:00:00 2001
From: vsavkin <avix1000@gmail.com>
Date: Thu, 7 Jul 2016 15:29:54 -0700
Subject: [PATCH] fix(router): fix RouterLinKActive to work with RouterLink

---
 .../router/src/directives/router_link.ts      | 12 ++++------
 modules/@angular/router/test/router.spec.ts   | 24 ++++++++++++-------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/modules/@angular/router/src/directives/router_link.ts b/modules/@angular/router/src/directives/router_link.ts
index 2b98fbf6b4..7dcf6c613c 100644
--- a/modules/@angular/router/src/directives/router_link.ts
+++ b/modules/@angular/router/src/directives/router_link.ts
@@ -62,8 +62,6 @@ export class RouterLink {
   @Input() queryParams: {[k: string]: any};
   @Input() fragment: string;
 
-  urlTree: UrlTree;
-
   constructor(
       private router: Router, private route: ActivatedRoute,
       private locationStrategy: LocationStrategy) {}
@@ -82,14 +80,14 @@ export class RouterLink {
     if (button !== 0 || ctrlKey || metaKey) {
       return true;
     }
+    this.router.navigateByUrl(this.urlTree);
+    return false;
+  }
 
-    this.urlTree = this.router.createUrlTreeUsingFutureUrl(
+  get urlTree(): UrlTree {
+    return this.router.createUrlTreeUsingFutureUrl(
         this.commands,
         {relativeTo: this.route, queryParams: this.queryParams, fragment: this.fragment});
-
-    this.router.navigateByUrl(this.urlTree);
-
-    return false;
   }
 }
 
diff --git a/modules/@angular/router/test/router.spec.ts b/modules/@angular/router/test/router.spec.ts
index 089f46e15e..5897cdb6a9 100644
--- a/modules/@angular/router/test/router.spec.ts
+++ b/modules/@angular/router/test/router.spec.ts
@@ -976,7 +976,7 @@ describe('Integration', () => {
   });
 
   describe('routerActiveLink', () => {
-    it('should set the class when the link is active',
+    it('should set the class when the link is active (a tag)',
        fakeAsync(inject(
            [Router, TestComponentBuilder, Location],
            (router: Router, tcb: TestComponentBuilder, location: Location) => {
@@ -997,15 +997,19 @@ describe('Integration', () => {
              advance(fixture);
              expect(location.path()).toEqual('/team/22/link;exact=true');
 
-             const native = fixture.debugElement.nativeElement.querySelector('a');
-             expect(native.className).toEqual('active');
+             const nativeLink = fixture.debugElement.nativeElement.querySelector('a');
+             const nativeButton = fixture.debugElement.nativeElement.querySelector('button');
+             expect(nativeLink.className).toEqual('active');
+             expect(nativeButton.className).toEqual('active');
 
              router.navigateByUrl('/team/22/link/simple');
              advance(fixture);
              expect(location.path()).toEqual('/team/22/link/simple');
-             expect(native.className).toEqual('');
+             expect(nativeLink.className).toEqual('');
+             expect(nativeButton.className).toEqual('');
            })));
 
+
     it('should set the class on a parent element when the link is active',
        fakeAsync(inject(
            [Router, TestComponentBuilder, Location],
@@ -1030,10 +1034,10 @@ describe('Integration', () => {
              const native = fixture.debugElement.nativeElement.querySelector('link-parent');
              expect(native.className).toEqual('active');
 
-             // router.navigateByUrl('/team/22/link/simple');
-             // advance(fixture);
-             // expect(location.path()).toEqual('/team/22/link/simple');
-             // expect(native.className).toEqual('');
+             router.navigateByUrl('/team/22/link/simple');
+             advance(fixture);
+             expect(location.path()).toEqual('/team/22/link/simple');
+             expect(native.className).toEqual('');
            })));
 
     it('should set the class when the link is active',
@@ -1171,7 +1175,9 @@ class AbsoluteLinkCmp {
 @Component({
   selector: 'link-cmp',
   template:
-      `<router-outlet></router-outlet><a routerLinkActive="active" [routerLinkActiveOptions]="{exact: exact}" [routerLink]="['./']">link</a>`,
+      `<router-outlet></router-outlet><a routerLinkActive="active" [routerLinkActiveOptions]="{exact: exact}" [routerLink]="['./']">link</a>
+<button routerLinkActive="active" [routerLinkActiveOptions]="{exact: exact}" [routerLink]="['./']">button</button>
+`,
   directives: ROUTER_DIRECTIVES
 })
 class DummyLinkCmp {