fix(router): router link active should take all descendants into account

This commit is contained in:
vsavkin 2016-07-22 16:42:05 -07:00
parent 93a4ca652a
commit 8d90a5a4cf
2 changed files with 41 additions and 37 deletions

View File

@ -59,8 +59,9 @@ import {RouterLink, RouterLinkWithHref} from './router_link';
*/
@Directive({selector: '[routerLinkActive]'})
export class RouterLinkActive implements OnChanges, OnDestroy, AfterContentInit {
@ContentChildren(RouterLink) links: QueryList<RouterLink>;
@ContentChildren(RouterLinkWithHref) linksWithHrefs: QueryList<RouterLinkWithHref>;
@ContentChildren(RouterLink, {descendants: true}) links: QueryList<RouterLink>;
@ContentChildren(RouterLinkWithHref, {descendants: true})
linksWithHrefs: QueryList<RouterLinkWithHref>;
private classes: string[] = [];
private subscription: Subscription;

View File

@ -1237,8 +1237,9 @@ describe('Integration', () => {
children: [{
path: 'link',
component: DummyLinkWithParentCmp,
children:
[{path: 'simple', component: SimpleCmp}, {path: '', component: BlankCmp}]
children: [
{path: 'simple', component: SimpleCmp}, {path: '', component: BlankCmp}
]
}]
}]);
@ -1439,17 +1440,6 @@ class DummyLinkCmp {
constructor(route: ActivatedRoute) { this.exact = (<any>route.snapshot.params).exact === 'true'; }
}
@Component({
selector: 'link-cmp',
template:
`<router-outlet></router-outlet><link-parent routerLinkActive="active" [routerLinkActiveOptions]="{exact: exact}"><a [routerLink]="['./']">link</a></link-parent>`,
directives: ROUTER_DIRECTIVES
})
class DummyLinkWithParentCmp {
private exact: boolean;
constructor(route: ActivatedRoute) { this.exact = (<any>route.snapshot.params).exact === 'true'; }
}
@Component({
selector: 'link-cmp',
template: `<a [routerLink]="['../simple']">link</a>`,
@ -1566,6 +1556,19 @@ class LinkInNgIf {
alwaysTrue = true;
}
@Component({
selector: 'link-cmp',
template: `<router-outlet></router-outlet>
<link-parent routerLinkActive="active" [routerLinkActiveOptions]="{exact: exact}">
<div ngClass="{one: 'true'}"><a [routerLink]="['./']">link</a></div>
</link-parent>`,
directives: ROUTER_DIRECTIVES
})
class DummyLinkWithParentCmp {
private exact: boolean;
constructor(route: ActivatedRoute) { this.exact = (<any>route.snapshot.params).exact === 'true'; }
}
@Component({
selector: 'root-cmp',
template: `<router-outlet></router-outlet>`,