fix(router): ensure routerLinkActive updates when associated routerLinks change (#38511)

This commit introduces a new subscription in the `routerLinkActive` directive which triggers an update
when any of its associated routerLinks have changes. `RouterLinkActive` not only needs to know when
links are added or removed, but it also needs to know about if a link it already knows about
changes in some way.

Quick note that `from...mergeAll` is used instead of just a simple
`merge` (or `scheduled...mergeAll`) to avoid introducing new rxjs
operators in order to keep bundle size down.

Fixes #18469

PR Close #38511
This commit is contained in:
Andrew Scott
2020-08-18 07:57:42 -07:00
parent bee44b3359
commit dbfb50e9f4
5 changed files with 120 additions and 16 deletions

View File

@ -4344,7 +4344,7 @@ describe('Integration', () => {
})));
});
describe('routerActiveLink', () => {
describe('routerLinkActive', () => {
it('should set the class when the link is active (a tag)',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
@ -4494,6 +4494,29 @@ describe('Integration', () => {
advance(fixture);
expect(paragraph.textContent).toEqual('false');
}));
it('should not trigger change detection when active state has not changed', fakeAsync(() => {
@Component({
template: `<div id="link" routerLinkActive="active" [routerLink]="link"></div>`,
})
class LinkComponent {
link = 'notactive';
}
@Component({template: ''})
class SimpleComponent {
}
TestBed.configureTestingModule({
imports: [RouterTestingModule.withRoutes([{path: '', component: SimpleComponent}])],
declarations: [LinkComponent, SimpleComponent]
});
const fixture = createRoot(TestBed.inject(Router), LinkComponent);
fixture.componentInstance.link = 'stillnotactive';
fixture.detectChanges(false /** checkNoChanges */);
expect(TestBed.inject(NgZone).hasPendingMicrotasks).toBe(false);
}));
});
describe('lazy loading', () => {