Question

我们在应用程序中使用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导入到延迟加载的模块中，而没有为其提供任何配置。.

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

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

Answer 1

设法解决了这个问题。以一种非常意外的方式。首先，正如Taranjit Kang所述，我使用<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  <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>  <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)

希望这会有所帮助。

Answer 2

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

<块引用>

{{1}}

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

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

2 个答案: