diff --git a/src/app/shared/layout/language-switcher/language-switcher.component.ts b/src/app/shared/layout/language-switcher/language-switcher.component.ts index 7c32947..bfd3491 100644 --- a/src/app/shared/layout/language-switcher/language-switcher.component.ts +++ b/src/app/shared/layout/language-switcher/language-switcher.component.ts @@ -1,4 +1,7 @@ -import { Component, computed, input } from '@angular/core'; +import { Component, computed, inject, input } from '@angular/core'; +import { toSignal } from '@angular/core/rxjs-interop'; +import { NavigationEnd, Router } from '@angular/router'; +import { EMPTY, filter } from 'rxjs'; import { Locale, localeLinks } from './locale-links'; // CIBG-GAP EXTENSION: "Taal instellen" (designsystem.cibg.nl/componenten/taal-instellen) — no @@ -14,6 +17,11 @@ import { Locale, localeLinks } from './locale-links'; * is read from the baked `` (`/en/` → en, else nl) — the deployment truth, independent * of the app-config `LOCALE_ID`. Only functional where both locale bundles are served (the * localized build, e.g. `npm run serve:i18n`), not under plain `ng serve` (nl-only at `/`). + * + * The shell (and this switcher within it) is a persistent parent — only the routed child + * swaps — so `location.pathname` must be re-read on every completed navigation (same + * `toSignal(router.events...)` idiom as `site-header.component.ts`'s breadcrumb `url`), or the + * target link freezes at whichever route was active when the switcher was first constructed. */ @Component({ selector: 'app-language-switcher', @@ -68,14 +76,21 @@ export class LanguageSwitcherComponent { ? location : ({ pathname: '/', search: '', hash: '' } as Location); - protected links = computed(() => - localeLinks( + private router = inject(Router, { optional: true }); + private nav = toSignal( + this.router?.events.pipe(filter((e) => e instanceof NavigationEnd)) ?? EMPTY, + { initialValue: null }, + ); + + protected links = computed(() => { + this.nav(); // recompute on every completed navigation — loc.pathname is read fresh below + return localeLinks( this.loc.pathname, this.activeLocale() ?? this.detected, this.loc.search, this.loc.hash, - ), - ); + ); + }); protected navLabel = $localize`:@@lang.navLabel:Taal / Language`; protected heading = $localize`:@@lang.heading:Kies een taal`;