Angular中如何通过routerLink为URL添加/en/前缀

1. 调整路由配置 #

在app-routing.module.ts中，为英文页面配置带/en/前缀的路由组，把原有页面路由作为其子路由：

const routes: Routes = [
  // 默认路由跳转到英文首页
  { path: '', redirectTo: '/en/home', pathMatch: 'full' },
  // 英文路由分组
  { 
    path: 'en', 
    children: [
      { path: 'home', component: HomeComponent },
      { path: 'about', component: AboutComponent },
      // 其他需要英文前缀的页面路由...
    ]
  }
];

如果后续要支持多语言，也可以用同样的方式添加其他语言的路由组（如/zh/）。

2. 模板中直接使用带前缀的routerLink #

在组件模板里，跳转英文页面时直接在routerLink中指定/en/前缀加具体路径：

<!-- 跳转英文首页 -->
<a routerLink="/en/home">Home</a>

<!-- 跳转英文关于页 -->
<a routerLink="/en/about">About</a>

如果需要根据当前语言动态生成路由（比如支持多语言切换），可以结合ngx-translate的当前语言值做绑定：

<a [routerLink]="[currentLang, 'home']">Home</a>

对应的组件类中通过TranslateService获取并监听当前语言：

import { TranslateService } from '@ngx-translate/core';
import { Router } from '@angular/router';

export class NavComponent {
  currentLang: string;

  constructor(private translate: TranslateService, private router: Router) {
    this.currentLang = this.translate.currentLang || 'en';
    // 监听语言变化，同步更新当前语言值
    this.translate.onLangChange.subscribe(event => {
      this.currentLang = event.lang;
    });
  }
}

3. 同步语言切换与路由更新 #

当用户切换到英文时，除了更新ngx-translate的语言设置，还要同步修改路由路径，确保URL带上/en/前缀：

switchToEnglish() {
  this.translate.use('en');
  // 获取当前页面的路由片段，替换语言前缀或添加前缀
  const currentPathSegments = this.router.url.split('/').filter(seg => seg);
  if (currentPathSegments.length > 0 && !currentPathSegments[0].match(/en|zh/)) {
    currentPathSegments.unshift('en');
  } else {
    currentPathSegments[0] = 'en';
  }
  this.router.navigate(['/' + currentPathSegments.join('/')]);
}

这样既满足URL带/en/前缀的要求，也能和ngx-translate的语言切换逻辑联动。

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