Angular ngx-translate加载外部语言文件无刷新添加查询参数方案问询

核心思路 #

默认的TranslateHttpLoader仅支持配置请求前缀和后缀，没有暴露自定义查询参数的入口，所以我们直接自定义实现TranslateLoader接口，即可完全控制请求的构造逻辑，同时支持动态修改参数，无需刷新页面。

实现步骤 #

1. 创建自定义TranslateLoader #

新建custom-translate.loader.ts文件，代码如下：

import { TranslateLoader } from '@ngx-translate/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';

@Injectable()
export class CustomTranslateLoader implements TranslateLoader {
  // 全局额外查询参数，可随时修改
  public static extraQueryParams: Record<string, string> = {};
  // 翻译接口基础地址
  private readonly baseApi = 'http://translation-service.remote.com/';

  constructor(private http: HttpClient) {}

  getTranslation(lang: string): Observable<any> {
    // 组装查询参数
    let params = new HttpParams();
    Object.entries(CustomTranslateLoader.extraQueryParams).forEach(([key, value]) => {
      params = params.append(key, value);
    });

    // 发起带自定义参数的请求
    return this.http.get(`${this.baseApi}${lang}`, { params });
  }
}

2. 替换app.module.ts中的Loader配置 #

修改TranslateModule的注册逻辑，替换默认的Loader为我们自定义的实现：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { CustomTranslateLoader } from './custom-translate.loader';
// 其他导入省略...

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: CustomTranslateLoader,
        deps: [HttpClient]
      }
    })
  ],
  // 其他配置省略...
})
export class AppModule { }

3. 动态设置/修改额外参数 #

在需要传递参数的业务逻辑处，直接修改静态属性extraQueryParams即可，修改后无需刷新页面，重新拉取翻译即可生效：

import { CustomTranslateLoader } from './custom-translate.loader';

// 示例：在app.component.ts中初始化参数
export class AppComponent {
  constructor(public translate: TranslateService){
    // 设置额外参数
    CustomTranslateLoader.extraQueryParams = {
      extraParam: 'abc',
      // 可扩展多个参数
      businessId: '123'
    };

    translate.addLangs(['en-us', 'en-gb']);
    translate.setDefaultLang(`en-us`);
  }

  // 示例：运行时修改参数
  changeExtraParam(newVal: string) {
    // 更新参数
    CustomTranslateLoader.extraQueryParams.extraParam = newVal;
    // 重新拉取当前语言的翻译，立即生效
    this.translate.use(this.translate.currentLang);
  }
}

扩展说明 #

如果不希望使用静态属性避免全局污染，可以额外创建一个共享配置服务存储额外参数，通过依赖注入传入自定义Loader即可，更适合复杂业务场景使用。

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