有一种方法可以同时在角度库和根项目中使用 ngx-translate？答案

【问题标题】：There is a way to use ngx-translate in angular library and in root project at the same time?有一种方法可以同时在角度库和根项目中使用 ngx-translate？
【发布时间】：2020-09-07 15:10:09
【问题描述】：

我有一个带有使用 ngx-translate 进行翻译的组件的 angular 库：

@NgModule({
    imports: [
       TranslateModule.forRoot({
            loader: {
              provide: TranslateLoader,
              useClass: WebpackTranslateLoader,
              deps: [HttpClient],
            },
            isolate: true
          }),
    ],
    ...
})
export class LibraryModule {
    ...
}

如果我在一个简单的项目中使用这个库 - 它会按预期工作。但是，如果我在具有自己的 ngx-translate 配置的项目中使用它：

@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: WebpackTranslateLoader,
        deps: [HttpClient],


       },
        }),
      ],
...

然后项目翻译不起作用。翻译取自共享库。如果我不使用该库，它会按预期工作。

我尝试在库模块中使用 TranslateModule.forChild 并获得此错误： AppComponent.html:1 错误 NullInjectorError: StaticInjectorError(AppModule)[TranslateService -> TranslateStore]:

我用：

"@angular/core": "^9.1.4",
"@ngx-translate/core": "^12.1.2",
"@ngx-translate/http-loader": "^4.0.0",

【问题讨论】：

标签： angular ngx-translate angular-library

【解决方案1】：

在组件根构造函数中强制赋值解决了这个问题。

this._translateService.currentLoader = new WebpackTranslateLoader();

但缺少子库翻译。通过手动合并翻译解决了这个问题：

getTranslation(lang: string): Observable<any> {
    const result = forkJoin(
      [
        from(<rootTranslation>),
        new ChildLibraryTranslateLoader().getTranslation(lang)]
      ).pipe(map(translations => {
        return { ...translations[0], ...translations[1] };
    }));

    return result;

【讨论】：