Angular中Transloco语言切换功能正常，但自定义lang管道无法更新URL

这个问题我之前也碰到过，核心原因是Angular的管道默认是纯管道（pure: true），它只会在管道的输入值发生变化时才会重新执行transform方法。你的LangPipe输入的value是固定的'/products/1'，所以哪怕Transloco的活跃语言切换了，输入值没变化，管道就不会重新计算URL，导致链接一直保留旧的语言前缀。

下面给你几个可行的解决办法，从快速修复到更符合Angular/Transloco最佳实践的方案：

方案1：将管道改为不纯管道 #

最简单的修复方式就是把LangPipe标记为不纯管道，这样Angular会在每个变更检测周期都检查管道的输出，当活跃语言变化时，管道就会重新计算URL：

@Pipe({
  name: 'lang',
  pure: false // 关键：设置为不纯管道
})
export class LangPipe {
  transloco = inject(TranslocoService);

  transform(value: string) {
    return `${this.transloco.getActiveLang()}/${value}`.replace(/\/\//g, '/');
  }
}

注意：不纯管道会在每次变更检测时执行，对于链接生成这种简单场景，性能影响可以忽略；但如果是复杂计算的管道，要谨慎使用。

方案2：用响应式Observable结合Async管道（更优雅的纯管道实现） #

如果你想保持管道为纯管道，同时响应语言变化，可以让管道返回一个Observable，然后在模板中配合async管道使用，完全符合Angular的响应式风格：

import { Observable, map, startWith } from 'rxjs';

@Pipe({
  name: 'lang',
  pure: true // 保持纯管道特性
})
export class LangPipe {
  transloco = inject(TranslocoService);

  transform(value: string): Observable<string> {
    // 监听语言变化流，同时发出初始语言对应的URL
    return this.transloco.langChanges$.pipe(
      map(lang => `${lang}/${value}`.replace(/\/\//g, '/')),
      startWith(`${this.transloco.getActiveLang()}/${value}`.replace(/\/\//g, '/'))
    );
  }
}

然后在模板中加上async管道订阅流：

<a [href]="('/products/1' | lang) | async">goto to some link</a>

这种方式既保留了纯管道的性能优势，又能自动响应语言变化，是更优雅的实现方式。

方案3：使用Transloco官方路由集成（最佳实践） #

其实Transloco已经内置了路由语言前缀的处理能力，完全不需要自己写自定义管道。你可以使用@jsverse/transloco-router来自动管理URL中的语言前缀，这是官方推荐的方案，稳定且无需维护自定义代码：

步骤1：安装依赖 #

首先安装Transloco路由扩展：

npm install @jsverse/transloco-router

步骤2：配置路由提供器 #

在bootstrapApplication的providers中添加Transloco路由配置：

import { provideTranslocoRouter } from '@jsverse/transloco-router';

bootstrapApplication(App, {
  providers: [
    provideHttpClient(),
    provideTransloco({
      config: {
        availableLangs: ['en', 'es'],
        defaultLang: 'en',
        reRenderOnLangChange: true,
        prodMode: !isDevMode(),
      },
      loader: TranslocoHttpLoader,
    }),
    // 添加Transloco路由配置
    provideTranslocoRouter({
      availableLangs: ['en', 'es'],
      defaultLang: 'en'
    }),
    provideRouter([
      // 路由配置无需手动添加语言前缀
      { path: 'products/:id', component: /* 你的目标组件 */ }
    ])
  ],
});

步骤3：在模板中使用routerLink #

现在你可以直接用routerLink，Transloco会自动给URL加上当前活跃语言的前缀：

<a routerLink="/products/1">goto to some link</a>

当你切换语言时，Transloco会自动更新所有routerLink的URL前缀，完全不需要自己处理，非常省心。

总结一下：如果只是临时快速修复可以用方案1；如果想保持纯管道的响应式实现用方案2；最推荐的是方案3，利用Transloco官方的路由集成，这是最符合框架生态的长期解决方案。

备注：内容来源于stack exchange，提问作者Jon