ngx-translate在延迟加载的模块中没有显示任何文本

Question

我们在我们的应用程序中使用Angular 6.我们最近开始准备我们的应用程序来进行延迟加载.应用程序有多个延迟加载的路由.我们希望为所有路由使用单个语言文件(不需要将其分成块.但是在bootstrap上加载所有翻译).

我尝试的第一件事就是在AppModule(forRoot)中导入和配置ngx-translate而不是其他地方.为此,我使用以下代码为TranslateModule创建了一个配置文件:

import {
    MissingTranslationHandler, MissingTranslationHandlerParams, TranslateLoader,
    TranslateModuleConfig
} from '@ngx-translate/core';
import {HttpClient} from '@angular/common/http';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';

export class MyMissingTranslationHandler implements MissingTranslationHandler {
    handle(params: MissingTranslationHandlerParams): string {
        return '';
    }
}

export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http, '/l10n/', '.json');
}

export const TRANSLATE_MODULE_CONFIG: TranslateModuleConfig = {
    loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
    },
    missingTranslationHandler: {provide: MissingTranslationHandler, useClass: MyMissingTranslationHandler},
};

这仅适用于急切加载的路线.对于延迟加载的所有文本都是空的.

然后我尝试forChild()在延迟加载的模块中使用与TranslateModule相同配置的方法(因为它在这里写 - ngx-translate).结果相同.我还尝试简单地将TranslateModule导入到延迟加载的模块中,而不提供任何配置.

这两种方式都不奏效.延迟加载的路由中的所有文本字段都是空的.

有没有人有类似的问题？我在网上搜索但找不到任何具体的解决方案.如何将来自同一文件的翻译正确应用于延迟加载的模块？

Answer 1

管理解决问题.以一种非常意外的方式.首先,正如Taranjit Kang所提到的,我使用forChild({})传入空对象的方法将TranslateModule导入到SharedModule .并出口它.

此外,我在SharedModule中创建了一个构造函数,注入了TranslateService并使用所有适当的东西对其进行初始化.

SharedModule:

@NgModule({
    imports: [TranslateModule.forChild({})],
  exports: [TranslateModule]
})
export class SharedModule {
    constructor(private translate: TranslateService) {
        translate.addLangs(['en', 'ru']);
        translate.setDefaultLang('en');
        translate.use('en');
    }
}

然后将SharedModule导入所有延迟加载的模块.

此外,和以前一样,我将带有forRoot(TRANSLATE_CONFIG)方法的TranslateModule导入到AppModule中.

TranslateModule.forRoot(TRANSLATE_MODULE_CONFIG)

希望这会有所帮助.