ngx-translate：未加载模块的单独翻译文件答案

【问题标题】：ngx-translate: Separate translation file for module does not loadngx-translate：未加载模块的单独翻译文件
【发布时间】：2021-04-22 11:22:41
【问题描述】：

我目前正在尝试为 NgRx 项目中的 Angular 模块进行翻译。对于翻译，我使用的是 ngx-translate，整个项目基于一个名为 "Angular NgRx Material Starter" 的模板。

但是，目前我面临的问题是我创建了一个名为“setup”的新模块，该模块应使用 /assets/i18n/setup 目录中的单独翻译。为了在这个模块中创建新模块和组件，我使用了 Angular CLI。

不幸的是，当我访问“设置”模块中的“设备”组件时，翻译文件没有加载，所以页面只显示了翻译文件中字符串的键。为了说明这个问题，我创建了一个非常简单的示例来重现使用基本模板的行为。由于我完全被困在这里，任何帮助都非常感谢。

这是一个包含完整项目的 ZIP 文件：ngx-translate problem

有什么想法吗？

core.module.ts:（开头加载一次），加载主翻译：

export {
  ...
};

export function httpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(
    http,
    `${environment.i18nPrefix}/assets/i18n/`,
    '.json'
  );
}

@NgModule({
  imports: [
    ...
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: httpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  declarations: [],
  providers: [
    ...
  ],
  exports: [
    ...
    TranslateModule
  ]
})
export class CoreModule {
  ...
}

shared.module.ts：“共享”模块只是导入和导出 TranslationModule：

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

setup.module.ts：“设置”模块如下所示：

export function setupHttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(
    http,
    `${environment.i18nPrefix}/assets/i18n/setup/`,
    '.json'
  );
}

@NgModule({
  imports: [
    LazyElementsModule,
    SharedModule,
    SetupRoutingModule,
    StoreModule.forFeature(FEATURE_NAME, reducers),
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: setupHttpLoaderFactory,
        deps: [HttpClient]
      },
      isolate: true
    }),
    EffectsModule.forFeature([
    ])
  ],
  declarations: [DevicesComponent]
})
export class SetupModule {
}

devices.component.ts/.html：这是“设备”组件：

@Component({
  selector: 'anms-devices',
  templateUrl: './devices.component.html',
  styleUrls: ['./devices.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DevicesComponent implements OnInit {

  constructor(private translate: TranslateService) { }

  ngOnInit(): void {
  }

}

<p>devices works!</p>
<h1>{{ 'setup.translation.test' | translate }}</h1>

setup-routing.module.ts：“设置”路由模块：

const routes: Routes = [
  {
    path: '',
    redirectTo: 'devices',
    pathMatch: 'full'
  },
  {
    path: 'devices',
    component: DevicesComponent,
    data: { title: 'ecue.setup.devices.title' }
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class SetupRoutingModule { }

【问题讨论】：

标签： angular internationalization ngrx ngx-translate

【解决方案1】：

好的，我找到了问题的答案，而且非常简单（也许太明显了）。在新创建的模块中，我创建了一个效果，它将在子模块的翻译服务中设置语言：

setTranslateServiceLanguage = createEffect(
() => () =>
  this.store.pipe(
    select(selectSettingsLanguage),
    distinctUntilChanged(),
    tap((language) => this.translateService.use(language))
  ),
 { dispatch: false }
);

【讨论】：