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:
@ -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', () => {
|
||||
|
Reference in New Issue
Block a user