honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Revert "fix(router): RouterLinkActive should update its state right after checking the children (#19449)" 

This reverts commit c569b75249.
As it was synched together with 5a9ed2de27
which broke an internal test.
This commit is contained in:
Tobias Bosch 2017-10-18 09:58:41 -07:00
parent 30ecb6e88a
commit b0c7ea8181
3 changed files with 16 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/router/src/directives/router_link_active.ts
View File

@ -118,19 +118,21 @@ export class RouterLinkActive implements OnChanges,
private update(): void { private update(): void {
if (!this.links || !this.linksWithHrefs || !this.router.navigated) return; if (!this.links || !this.linksWithHrefs || !this.router.navigated) return;
Promise.resolve().then(() => { const hasActiveLinks = this.hasActiveLinks();
const hasActiveLinks = this.hasActiveLinks();
if (this.isActive !== hasActiveLinks) { // react only when status has changed to prevent unnecessary dom updates
(this as any).isActive = hasActiveLinks; if (this.isActive !== hasActiveLinks) {
this.classes.forEach((c) => { this.classes.forEach((c) => {
if (hasActiveLinks) { if (hasActiveLinks) {
this.renderer.addClass(this.element.nativeElement, c); this.renderer.addClass(this.element.nativeElement, c);
} else { } else {
this.renderer.removeClass(this.element.nativeElement, c); this.renderer.removeClass(this.element.nativeElement, c);
} }
}); });
} Promise.resolve(hasActiveLinks).then(active => (this as{
}); isActive: boolean
}).isActive = active);
}
} }
private isLinkActive(router: Router): (link: (RouterLink|RouterLinkWithHref)) => boolean { private isLinkActive(router: Router): (link: (RouterLink|RouterLinkWithHref)) => boolean {

3
packages/router/test/integration.spec.ts
View File

@ -2655,7 +2655,6 @@ describe('Integration', () => {
router.navigateByUrl('/team/22/link;exact=true'); router.navigateByUrl('/team/22/link;exact=true');
advance(fixture); advance(fixture);
advance(fixture);
expect(location.path()).toEqual('/team/22/link;exact=true'); expect(location.path()).toEqual('/team/22/link;exact=true');
const nativeLink = fixture.nativeElement.querySelector('a'); const nativeLink = fixture.nativeElement.querySelector('a');
@ -2712,7 +2711,6 @@ describe('Integration', () => {
router.navigateByUrl('/team/22/link;exact=true'); router.navigateByUrl('/team/22/link;exact=true');
advance(fixture); 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.nativeElement.querySelector('#link-parent'); const native = fixture.nativeElement.querySelector('#link-parent');
@ -2741,7 +2739,6 @@ describe('Integration', () => {
router.navigateByUrl('/team/22/link'); router.navigateByUrl('/team/22/link');
advance(fixture); advance(fixture);
advance(fixture);
expect(location.path()).toEqual('/team/22/link'); expect(location.path()).toEqual('/team/22/link');
const native = fixture.nativeElement.querySelector('a'); const native = fixture.nativeElement.querySelector('a');

53
packages/router/test/regression_integration.spec.ts
View File

@ -7,9 +7,8 @@
*/ */
import {CommonModule} from '@angular/common'; import {CommonModule} from '@angular/common';
import {Component, ContentChild, NgModule, TemplateRef, Type, ViewChild, ViewContainerRef} from '@angular/core'; import {Component, NgModule, Type} from '@angular/core';
import {ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing'; 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 {Router} from '@angular/router';
import {RouterTestingModule} from '@angular/router/testing'; import {RouterTestingModule} from '@angular/router/testing';
@ -57,56 +56,6 @@ describe('Integration', () => {
instance.show = true; instance.show = true;
expect(() => advance(fixture)).not.toThrow(); 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');
}));
}); });
}); });