Angular2集成Localize-Router切换语言时总是重定向至首页问题

Hey there! Let's tackle this annoying language-switch redirect issue with localize-router and ngx-translate—I've run into similar quirks before, so here are the most common fixes to try out:

1. Preserve the Current Route When Changing Language #

By default, localizeRouterService.changeLanguage() will redirect to the root route if you don't pass additional context. The fix is to pass your current route snapshot to keep the user on their current page:

import { LocalizeRouterService } from 'localize-router';
import { ActivatedRoute } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';

constructor(
  private localizeRouter: LocalizeRouterService,
  private activatedRoute: ActivatedRoute,
  private translate: TranslateService
) {}

switchLanguage(selectedLang: string) {
  // Pass the active route snapshot to retain current page
  this.localizeRouter.changeLanguage(selectedLang, this.activatedRoute.snapshot);
  // Also sync ngx-translate with the new language
  this.translate.use(selectedLang);
}

2. Audit Your Route Configuration #

Double-check your LocalizeRouterModule setup to rule out misconfigured settings that force root redirects:

LocalizeRouterModule.forRoot(routes, {
  parser: { provide: LocalizeParser, useClass: ManualParserLoader, deps: [TranslateService, Location] },
  alwaysSetPrefix: true, // Ensures language prefix stays in URLs
  useCachedLang: false, // Prevents stale cached language from overriding current route
  enableDebug: false // Set to true temporarily if you need to debug routing logs
})

Also, make sure your base routes don't have unintended redirectTo: '/' rules that trigger when the language prefix changes.

3. Verify Version Compatibility #

Mismatched versions between Angular, ngx-translate, and localize-router often cause weird routing bugs. For example:

• If you're on Angular 14+, use localize-router@8.x or higher
• Pair @ngx-translate/core@14.x with @ngx-translate/http-loader@7.x

Check your package.json to confirm versions align with the official compatibility docs for both libraries.

4. Check for Unintended Redirects in Your Switcher Component #

Sometimes the issue is as simple as an accidental router.navigate(['/']) in your language switcher code. Inspect your template and component logic to ensure only the language change function runs on selection:

<!-- Avoid adding routerLink to your language dropdown -->
<select (change)="switchLanguage($event.target.value)">
  <option value="en">English</option>
  <option value="es">Español</option>
</select>

If none of these fixes work, try clearing your browser cache (localize-router uses localStorage for language caching) or adding a manual route sync in your app's root component ngOnInit():

ngOnInit() {
  const activeLang = this.translate.currentLang;
  this.localizeRouter.setRouteLang(activeLang, this.activatedRoute.snapshot);
}

内容的提问来源于stack exchange，提问作者user2548436