cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(router): fix RouterLinKActive to work with RouterLink

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
modules/@angular/router/src/directives/router_link.ts
View File

@ -62,8 +62,6 @@ export class RouterLink {
@Input() queryParams: {[k: string]: any}; @Input() queryParams: {[k: string]: any};
@Input() fragment: string; @Input() fragment: string;
urlTree: UrlTree;
constructor( constructor(
private router: Router, private route: ActivatedRoute, private router: Router, private route: ActivatedRoute,
private locationStrategy: LocationStrategy) {} private locationStrategy: LocationStrategy) {}
@ -82,14 +80,14 @@ export class RouterLink {
if (button !== 0 || ctrlKey || metaKey) { if (button !== 0 || ctrlKey || metaKey) {
return true; return true;
} }
this.router.navigateByUrl(this.urlTree);
return false;
}
this.urlTree = this.router.createUrlTreeUsingFutureUrl( get urlTree(): UrlTree {
return this.router.createUrlTreeUsingFutureUrl(
this.commands, this.commands,
{relativeTo: this.route, queryParams: this.queryParams, fragment: this.fragment}); {relativeTo: this.route, queryParams: this.queryParams, fragment: this.fragment});
this.router.navigateByUrl(this.urlTree);
return false;
} }
} }

24
modules/@angular/router/test/router.spec.ts
View File

@ -976,7 +976,7 @@ describe('Integration', () => {
}); });
describe('routerActiveLink', () => { 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( fakeAsync(inject(
[Router, TestComponentBuilder, Location], [Router, TestComponentBuilder, Location],
(router: Router, tcb: TestComponentBuilder, location: Location) => { (router: Router, tcb: TestComponentBuilder, location: Location) => {
@ -997,15 +997,19 @@ describe('Integration', () => {
advance(fixture); advance(fixture);
expect(location.path()).toEqual('/team/22/link;exact=true'); expect(location.path()).toEqual('/team/22/link;exact=true');
const native = fixture.debugElement.nativeElement.querySelector('a'); const nativeLink = fixture.debugElement.nativeElement.querySelector('a');
expect(native.className).toEqual('active'); const nativeButton = fixture.debugElement.nativeElement.querySelector('button');
expect(nativeLink.className).toEqual('active');
expect(nativeButton.className).toEqual('active');
router.navigateByUrl('/team/22/link/simple'); router.navigateByUrl('/team/22/link/simple');
advance(fixture); advance(fixture);
expect(location.path()).toEqual('/team/22/link/simple'); 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', it('should set the class on a parent element when the link is active',
fakeAsync(inject( fakeAsync(inject(
[Router, TestComponentBuilder, Location], [Router, TestComponentBuilder, Location],
@ -1030,10 +1034,10 @@ describe('Integration', () => {
const native = fixture.debugElement.nativeElement.querySelector('link-parent'); const native = fixture.debugElement.nativeElement.querySelector('link-parent');
expect(native.className).toEqual('active'); expect(native.className).toEqual('active');
// router.navigateByUrl('/team/22/link/simple'); router.navigateByUrl('/team/22/link/simple');
// advance(fixture); advance(fixture);
// expect(location.path()).toEqual('/team/22/link/simple'); expect(location.path()).toEqual('/team/22/link/simple');
// expect(native.className).toEqual(''); expect(native.className).toEqual('');
}))); })));
it('should set the class when the link is active', it('should set the class when the link is active',
@ -1171,7 +1175,9 @@ class AbsoluteLinkCmp {
@Component({ @Component({
selector: 'link-cmp', selector: 'link-cmp',
template: 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 directives: ROUTER_DIRECTIVES
}) })
class DummyLinkCmp { class DummyLinkCmp {