fix(Router) Fix detect active route in depth.
This commit is contained in:
parent
d5f5ce82ca
commit
a38c9a1ef7
|
@ -4,7 +4,7 @@ import {isBlank, isPresent, Type} from '../src/facade/lang';
|
||||||
import {BaseException} from '../src/facade/exceptions';
|
import {BaseException} from '../src/facade/exceptions';
|
||||||
import {Location} from '@angular/common';
|
import {Location} from '@angular/common';
|
||||||
import {RouteRegistry, ROUTER_PRIMARY_COMPONENT} from './route_registry';
|
import {RouteRegistry, ROUTER_PRIMARY_COMPONENT} from './route_registry';
|
||||||
import {ComponentInstruction, Instruction} from './instruction';
|
import {ComponentInstruction, Instruction, DefaultInstruction} from './instruction';
|
||||||
import {RouterOutlet} from './directives/router_outlet';
|
import {RouterOutlet} from './directives/router_outlet';
|
||||||
import {getCanActivateHook} from './lifecycle/route_lifecycle_reflector';
|
import {getCanActivateHook} from './lifecycle/route_lifecycle_reflector';
|
||||||
import {RouteDefinition} from './route_config/route_config_impl';
|
import {RouteDefinition} from './route_config/route_config_impl';
|
||||||
|
@ -131,8 +131,9 @@ export class Router {
|
||||||
*/
|
*/
|
||||||
isRouteActive(instruction: Instruction): boolean {
|
isRouteActive(instruction: Instruction): boolean {
|
||||||
var router: Router = this;
|
var router: Router = this;
|
||||||
|
var currentInstruction = this.currentInstruction;
|
||||||
|
|
||||||
if (isBlank(this.currentInstruction)) {
|
if (isBlank(currentInstruction)) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -142,22 +143,28 @@ export class Router {
|
||||||
instruction = instruction.child;
|
instruction = instruction.child;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isBlank(instruction.component) || isBlank(this.currentInstruction.component) ||
|
let reason = true;
|
||||||
this.currentInstruction.component.routeName != instruction.component.routeName) {
|
|
||||||
|
// check the instructions in depth
|
||||||
|
do {
|
||||||
|
if (isBlank(instruction.component) || isBlank(currentInstruction.component) ||
|
||||||
|
currentInstruction.component.routeName != instruction.component.routeName) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
if (isPresent(instruction.component.params)) {
|
||||||
let paramEquals = true;
|
|
||||||
|
|
||||||
if (isPresent(this.currentInstruction.component.params)) {
|
|
||||||
StringMapWrapper.forEach(instruction.component.params, (value, key) => {
|
StringMapWrapper.forEach(instruction.component.params, (value, key) => {
|
||||||
if (this.currentInstruction.component.params[key] !== value) {
|
if (currentInstruction.component.params[key] !== value) {
|
||||||
paramEquals = false;
|
reason = false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
currentInstruction = currentInstruction.child;
|
||||||
|
instruction = instruction.child;
|
||||||
|
} while (isPresent(currentInstruction) && isPresent(instruction) &&
|
||||||
|
!(instruction instanceof DefaultInstruction) && reason);
|
||||||
|
|
||||||
return paramEquals;
|
// ignore DefaultInstruction
|
||||||
|
return reason && (isBlank(instruction) || instruction instanceof DefaultInstruction);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -295,6 +295,51 @@ export function main() {
|
||||||
router.navigateByUrl('/child-with-grandchild/grandchild?extra=0');
|
router.navigateByUrl('/child-with-grandchild/grandchild?extra=0');
|
||||||
});
|
});
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
it('should not be added to links in other child routes',
|
||||||
|
inject([AsyncTestCompleter], (async) => {
|
||||||
|
router.config([
|
||||||
|
new Route({path: '/child', component: HelloCmp, name: 'Child'}),
|
||||||
|
new Route({
|
||||||
|
path: '/child-with-grandchild/...',
|
||||||
|
component: ParentCmp,
|
||||||
|
name: 'ChildWithGrandchild'
|
||||||
|
}),
|
||||||
|
new Route({
|
||||||
|
path: '/child-with-other-grandchild/...',
|
||||||
|
component: ParentCmp,
|
||||||
|
name: 'ChildWithOtherGrandchild'
|
||||||
|
})
|
||||||
|
])
|
||||||
|
.then((_) => compile(`<a [routerLink]="['./Child']" class="child-link">Child</a>
|
||||||
|
<a [routerLink]="['./ChildWithGrandchild/Grandchild']" class="child-with-grandchild-link">Better Child</a>
|
||||||
|
<a [routerLink]="['./ChildWithOtherGrandchild/Grandchild']" class="child-with-other-grandchild-link">Better Child</a>
|
||||||
|
<router-outlet></router-outlet>`))
|
||||||
|
.then((_) => {
|
||||||
|
var element = fixture.debugElement.nativeElement;
|
||||||
|
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
|
var link1 = getDOM().querySelector(element, '.child-link');
|
||||||
|
var link2 = getDOM().querySelector(element, '.child-with-grandchild-link');
|
||||||
|
var link3 = getDOM().querySelector(element, '.child-with-other-grandchild-link');
|
||||||
|
|
||||||
|
expect(link1).not.toHaveCssClass('router-link-active');
|
||||||
|
expect(link2).not.toHaveCssClass('router-link-active');
|
||||||
|
expect(link3).not.toHaveCssClass('router-link-active');
|
||||||
|
|
||||||
|
router.subscribe((_) => {
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
|
expect(link1).not.toHaveCssClass('router-link-active');
|
||||||
|
expect(link2).toHaveCssClass('router-link-active');
|
||||||
|
expect(link3).not.toHaveCssClass('router-link-active');
|
||||||
|
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
router.navigateByUrl('/child-with-grandchild/grandchild?extra=0');
|
||||||
|
});
|
||||||
|
}));
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('when clicked', () => {
|
describe('when clicked', () => {
|
||||||
|
|
Loading…
Reference in New Issue