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:
- `link`,
+ `link
+
+`,
directives: ROUTER_DIRECTIVES
})
class DummyLinkCmp {