Angular 2/4/5路由导航：同一URL仅能重载一次的问题

我之前也碰到过一模一样的场景——Angular默认对同URL的路由导航会跳过组件重载，这是框架的性能优化策略，但刚好和咱们多语言切换的需求冲突了。下面给你几个实用的解决方案，按需选择就行：

方法1：全局配置路由的同URL导航策略 #

这是最直接的方法，修改路由配置让Angular对同URL导航也触发重载：

在你的app-routing.module.ts里，给RouterModule.forRoot加上onSameUrlNavigation: 'reload'配置：

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    onSameUrlNavigation: 'reload', // 关键：允许同URL导航触发重载
    scrollPositionRestoration: 'top' // 可选：重载后回到页面顶部
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

不过要注意，这个配置是全局生效的，所以所有同URL导航都会触发重载。如果你的组件里有ngOnInit初始化逻辑，现在每次切换语言调用router.navigate时，ngOnInit都会重新执行，刚好符合咱们加载对应语言内容的需求。

方法2：监听路由参数变化，手动触发初始化逻辑 #

如果不想全局修改路由配置，可以在组件里订阅路由参数的变化，手动调用内容加载逻辑。这种方式更灵活，适合只在特定组件生效的场景：

首先，把你原来放在ngOnInit里的加载逻辑抽成单独的方法：

ngOnInit(): void {
  // 订阅路由参数变化（比如语言参数?lang=en）
  this.route.queryParams.subscribe(() => {
    this.loadLanguageSpecificContent();
  });

  // 页面初始加载时执行一次
  this.loadLanguageSpecificContent();
}

private loadLanguageSpecificContent(): void {
  // 获取当前选中的语言（可以从service/localStorage/路由参数里拿）
  const currentLang = this.pageService.getCurrentLanguage();
  
  // 调用服务加载对应语言的页面内容
  this.pageService.getPageContent(currentLang).subscribe(content => {
    this.pageContent = content;
    // 手动触发变更检测（因为在订阅回调里，Angular可能没自动检测到）
    this.cd.markForCheck();
  });

  // 顺便更新meta标签（你的构造函数里注入了Meta服务）
  this.updateMetaTags(currentLang);
}

private updateMetaTags(lang: string): void {
  // 根据语言更新页面meta信息，比如title、description等
  this.meta.updateTag({ name: 'description', content: lang === 'en' ? 'English Description' : 'Deutsche Beschreibung' });
}

然后修改你的changeLanguage函数，导航时带上语言参数（这样路由参数变化会触发订阅回调）：

changeLanguage(selectedLang: string): void {
  // 保存当前语言到全局服务或localStorage
  this.pageService.setCurrentLanguage(selectedLang);
  
  // 导航到当前路由，更新语言参数
  this.router.navigate([], {
    queryParams: { lang: selectedLang },
    queryParamsHandling: 'merge' // 保留其他可能存在的路由参数
  });
}

方法3：自定义路由复用策略（适合精细控制场景） #

如果以上两种方法都不满足你的需求，还可以自定义路由复用策略，让Angular在语言变化时不复用当前组件，强制重新创建：

首先创建一个自定义的RouteReuseStrategy类：

import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';

export class LanguageAwareRouteReuseStrategy implements RouteReuseStrategy {
  // 不允许路由被缓存
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {}

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    return null;
  }

  // 只有当语言参数相同且路由配置相同时，才复用路由
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.queryParams.lang === curr.queryParams.lang && future.routeConfig === curr.routeConfig;
  }
}

然后在app.module.ts里把这个策略提供给Angular：

import { RouteReuseStrategy } from '@angular/router';
import { LanguageAwareRouteReuseStrategy } from './path-to-your-strategy';

@NgModule({
  // ...其他配置
  providers: [
    { provide: RouteReuseStrategy, useClass: LanguageAwareRouteReuseStrategy }
  ]
})
export class AppModule { }

这样，当语言参数变化时，Angular会认为是不同的路由场景，从而重新创建组件，触发ngOnInit等生命周期钩子。

内容的提问来源于stack exchange，提问作者t.c.