fix(router): fix RouterLinKActive to work with RouterLink

This commit is contained in:
vsavkin 2016-07-07 15:29:54 -07:00
parent 93025d1bc6
commit f7a0e9ecb6
2 changed files with 20 additions and 16 deletions

View File

@ -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;
}
}

View File

@ -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 {