Permalink
Browse files

fix(router): RouterLinkActive should update its state right after che…

…cking the children (#19449)

Closes #18983

PR Close #19449
  • Loading branch information...
vsavkin authored and tbosch committed Sep 27, 2017
1 parent 7d1abd9 commit 6f2939da626ad5233004b8160a516aac0e1a2f04
@@ -118,21 +118,19 @@ export class RouterLinkActive implements OnChanges,
private update(): void {
if (!this.links || !this.linksWithHrefs || !this.router.navigated) return;
const hasActiveLinks = this.hasActiveLinks();
// react only when status has changed to prevent unnecessary dom updates
if (this.isActive !== hasActiveLinks) {
this.classes.forEach((c) => {
if (hasActiveLinks) {
this.renderer.addClass(this.element.nativeElement, c);
} else {
this.renderer.removeClass(this.element.nativeElement, c);
}
});
Promise.resolve(hasActiveLinks).then(active => (this as{
isActive: boolean
}).isActive = active);
}
Promise.resolve().then(() => {
const hasActiveLinks = this.hasActiveLinks();
if (this.isActive !== hasActiveLinks) {
(this as any).isActive = hasActiveLinks;
this.classes.forEach((c) => {
if (hasActiveLinks) {
this.renderer.addClass(this.element.nativeElement, c);
} else {
this.renderer.removeClass(this.element.nativeElement, c);
}
});
}
});
}
private isLinkActive(router: Router): (link: (RouterLink|RouterLinkWithHref)) => boolean {
@@ -2655,6 +2655,7 @@ describe('Integration', () => {
router.navigateByUrl('/team/22/link;exact=true');
advance(fixture);
advance(fixture);
expect(location.path()).toEqual('/team/22/link;exact=true');
const nativeLink = fixture.nativeElement.querySelector('a');
@@ -2711,6 +2712,7 @@ describe('Integration', () => {
router.navigateByUrl('/team/22/link;exact=true');
advance(fixture);
advance(fixture);
expect(location.path()).toEqual('/team/22/link;exact=true');
const native = fixture.nativeElement.querySelector('#link-parent');
@@ -2739,6 +2741,7 @@ describe('Integration', () => {
router.navigateByUrl('/team/22/link');
advance(fixture);
advance(fixture);
expect(location.path()).toEqual('/team/22/link');
const native = fixture.nativeElement.querySelector('a');
@@ -7,8 +7,9 @@
*/
import {CommonModule} from '@angular/common';
import {Component, NgModule, Type} from '@angular/core';
import {Component, ContentChild, NgModule, TemplateRef, Type, ViewChild, ViewContainerRef} from '@angular/core';
import {ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing';
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
import {Router} from '@angular/router';
import {RouterTestingModule} from '@angular/router/testing';
@@ -56,6 +57,56 @@ describe('Integration', () => {
instance.show = true;
expect(() => advance(fixture)).not.toThrow();
}));
it('should set isActive right after looking at its children -- #18983', fakeAsync(() => {
@Component({
template: `
<div #rla="routerLinkActive" routerLinkActive>
isActive: {{rla.isActive}}
<ng-template let-data>
<a [routerLink]="data">link</a>
</ng-template>
<ng-container #container></ng-container>
</div>
`
})
class ComponentWithRouterLink {
@ViewChild(TemplateRef) templateRef: TemplateRef<any>;
@ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef;
addLink() {
this.container.createEmbeddedView(this.templateRef, {$implicit: '/simple'});
}
removeLink() { this.container.clear(); }
}
@Component({template: 'simple'})
class SimpleCmp {
}
TestBed.configureTestingModule({
imports: [RouterTestingModule.withRoutes([{path: 'simple', component: SimpleCmp}])],
declarations: [ComponentWithRouterLink, SimpleCmp]
});
const router: Router = TestBed.get(Router);
const fixture = createRoot(router, ComponentWithRouterLink);
router.navigateByUrl('/simple');
advance(fixture);
fixture.componentInstance.addLink();
fixture.detectChanges();
fixture.componentInstance.removeLink();
advance(fixture);
advance(fixture);
expect(fixture.nativeElement.innerHTML).toContain('isActive: false');
}));
});
});

0 comments on commit 6f2939d

Please sign in to comment.