我们在应用程序中使用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导入到延迟加载的模块中,而没有为其提供任何配置。.
这两种方法均无效。延迟加载的路由中的所有文本字段均为空。
有人有类似的问题吗?我正在网上搜索,但找不到任何特定的解决方案。如何正确地将同一文件的翻译应用于延迟加载的模块?
答案 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”才能让它工作,花了我几天时间,非常令人沮丧