如何使用ngx-translator同时加载静态语言文件及按需加载额外语言资源

完全可以实现该需求，ngx-translate 本身提供了原生扩展机制，支持静态资源预加载与运行时动态追加翻译内容，以下是两种常用实现方式：

方式一：静态资源预加载 + 按需动态追加翻译 #

适合运行时翻译是零散、按需触发加载的场景，配置步骤如下：

1. 基础配置保持默认的静态JSON加载逻辑，在AppModule中配置TranslateHttpLoader加载assets下的静态翻译文件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app.component';

// 静态翻译文件加载工厂
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 拿到运行时翻译数据后，调用setTranslation方法追加翻译，第三个参数merge设为true即可实现与已加载的静态翻译合并，不会覆盖原有内容：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private translate: TranslateService) {}

  // 按需加载运行时翻译的方法
  addRuntimeTranslations(lang: string, runtimeTranslations: Record<string, string>) {
    this.translate.setTranslation(lang, runtimeTranslations, true);
  }
}

方式二：自定义组合Loader统一加载两类资源 #

适合运行时翻译需要在初始化时批量加载的场景，自定义Loader同时请求静态JSON和后端接口返回的运行时翻译，合并后返回给ngx-translate：

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

export class CombineTranslateLoader implements TranslateLoader {
  constructor(private http: HttpClient) {}

  getTranslation(lang: string): Observable<any> {
    // 同时请求静态翻译文件和后端运行时翻译接口
    return forkJoin([
      this.http.get(`./assets/i18n/${lang}.json`),
      this.http.get(`/api/i18n/runtime/${lang}`)
    ]).pipe(
      // 合并两类翻译内容
      map(([staticTrans, runtimeTrans]) => Object.assign({}, staticTrans, runtimeTrans))
    );
  }
}

将AppModule中TranslateModule的loader配置替换为自定义的CombineTranslateLoader即可。

注意事项 #

• 若动态翻译与静态翻译存在重复key，后加载的内容会覆盖先加载的内容，可通过给运行时翻译增加统一前缀（如runtime.*）避免冲突
• 多语言切换场景下，需要对应加载目标语言的运行时翻译，避免切换后翻译缺失

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