Angular自定义库中如何为@ngx-translate/core设置默认翻译值？

核心思路 #

要实现库的翻译键在根应用无对应翻译时显示默认值，核心是让库自带一套默认翻译资源，并通过合并翻译资源或兜底处理的方式，确保未找到根应用翻译时能 fallback 到库的默认值。

具体实现方案 #

方案一：自定义Loader合并库默认翻译与根应用翻译 #

1. 添加库的默认翻译文件
   在库的assets/i18n目录下创建默认语言的翻译文件（比如en.json），存放库专属的翻译键值对：

{
  "GRID_PRESET": {
    "EXPORT": "Export",
    "REFRESH": "Refresh",
    "NO_DATA": "No data available"
  }
}

2. 修改HttpLoaderFactory实现合并逻辑
   自定义Loader先加载库的默认翻译，再加载根应用的翻译，最终合并两者（根应用翻译会覆盖库的默认值）：

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

export function HttpLoaderFactory(http: HttpClient) {
  // 加载库的默认翻译
  const libDefaultTrans$ = http.get('/assets/i18n/en.json');
  // 加载根应用当前语言的翻译
  const appTrans$ = http.get(`/assets/i18n/${translate.getDefaultLang()}.json`);

  return new Observable(observer => {
    forkJoin([libDefaultTrans$, appTrans$]).pipe(
      map(([libTrans, appTrans]) => ({ ...libTrans, ...appTrans }))
    ).subscribe(mergedTrans => {
      observer.next(mergedTrans);
      observer.complete();
    });
  });
}

3. 保持库的TranslateModule配置
   无需修改原TranslateModule.forRoot的结构，确保使用上述自定义Loader即可：

@NgModule({
  declarations: [...],
  imports: [
    ...,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      defaultLanguage: 'en'
    }),
    ...
  ],
  exports: []
})
export class GridPresetModule {
  static config(authenticationKey: () => string,
    SERVER_ADDRESS: () => string,
    SERVER_ADDRESS_NEW: () => string,
    localStorageTokenKey: () => string): ModuleWithProviders<GridPresetModule> {
    return {
      ngModule: GridPresetModule,
      providers: [...]
    };
  }
}

方案二：自定义翻译管道实现兜底 #

如果不想修改Loader逻辑，可自定义管道继承TranslatePipe，在未找到翻译时返回默认值：

1. 创建自定义管道

import { Pipe, PipeTransform } from '@angular/core';
import { TranslatePipe } from '@ngx-translate/core';

@Pipe({
  name: 'libTranslate'
})
export class LibTranslatePipe extends TranslatePipe implements PipeTransform {
  transform(value: string, args?: any[], defaultValue?: string): any {
    const translated = super.transform(value, args);
    // 若翻译结果等于原键名（说明未找到对应翻译），返回传入的默认值
    return translated === value ? defaultValue || value : translated;
  }
}

2. 在库模块中声明并导出管道

@NgModule({
  declarations: [..., LibTranslatePipe],
  imports: [...],
  exports: [..., LibTranslatePipe]
})
export class GridPresetModule { ... }

3. 在库组件模板中使用

<button>{{ 'GRID_PRESET.EXPORT' | libTranslate:[]:'Export' }}</button>

方案三：通过TranslateService预加载默认翻译 #

在库模块初始化时，调用TranslateService的setTranslation方法，将库的默认翻译合并到现有翻译中：

import { TranslateService } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';

export class GridPresetModule {
  constructor(private translate: TranslateService, private http: HttpClient) {
    // 加载库默认翻译并合并，第三个参数为true表示不覆盖现有翻译
    this.http.get('/assets/i18n/en.json').subscribe(libTrans => {
      this.translate.setTranslation(this.translate.getDefaultLang(), libTrans, true);
    });
  }

  static config(...): ModuleWithProviders<GridPresetModule> { ... }
}

注意事项 #

• 确保库的翻译文件能被正确打包，在库的ng-package.json中配置assets路径：

  {
    "assets": ["./assets/i18n/**"]
  }
  

• 若根应用使用了非标准的翻译文件路径，可通过库的config方法让根应用传入自定义路径，适配不同场景。

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