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

时间:2018-06-22 16:35:17

标签: angular lazy-loading angular6 ngx-translate

我们在应用程序中使用Angular 6。我们最近开始为延迟加载准备我们的应用程序。应用程序具有多个延迟加载的路由。 我们希望对所有路由使用单个语言文件(不需要将其分成多个块,而是将所有翻译加载到引导程序上)。

我尝试的第一件事就是在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导入到延迟加载的模块中,而没有为其提供任何配置。.

这两种方法均无效。延迟加载的路由中的所有文本字段均为空。

有人有类似的问题吗?我正在网上搜索,但找不到任何特定的解决方案。如何正确地将同一文件的翻译应用于延迟加载的模块?

2 个答案:

答案 0 :(得分:8)

设法解决了这个问题。以一种非常意外的方式。 首先,正如Taranjit Kang所述,我使用<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- Drop Shadow Stack --> <item> <shape> <corners android:radius="4dp" /> <padding android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="1dp" /> <solid android:color="#00CCCCCC" /> </shape> </item> <item> <shape> <corners android:radius="4dp" /> <padding android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="1dp" /> <solid android:color="#10CCCCCC" /> </shape> </item> <item> <shape> <corners android:radius="4dp" /> <padding android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="1dp" /> <solid android:color="#20d5d5d5" /> </shape> </item> <item> <shape> <corners android:radius="6dp" /> <padding android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="1dp" /> <solid android:color="#30cbcbcb" /> </shape> </item> <item> <shape> <corners android:radius="4dp" /> <padding android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="1dp" /> <solid android:color="#50bababa" /> </shape> </item> <!-- Background --> <item> <shape> <solid android:color="@color/gray_100" /> <corners android:radius="4dp" /> </shape> </item> </layer-list> 方法将TranslateModule导入到SharedModule中,并传入了一个空对象。并导出。

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

SharedModule:

forChild({})

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

而且,像以前一样,我使用@NgModule({ imports: [TranslateModule.forChild({})], exports: [TranslateModule] }) export class SharedModule { constructor(private translate: TranslateService) { translate.addLangs(['en', 'ru']); translate.setDefaultLang('en'); translate.use('en'); } } 方法将TranslateModule导入AppModule。

forRoot(TRANSLATE_CONFIG)

希望这会有所帮助。

答案 1 :(得分:0)

导入到不是根组件的组件时,我使用了以下内容:

<块引用>
{{1}}

我必须设置“isolate: false”才能让它工作,花了我几天时间,非常令人沮丧