angular2+国际化实践(ngx-translate方案)

最新推荐文章于 2024-06-21 17:36:45 发布

kingbaron

最新推荐文章于 2024-06-21 17:36:45 发布

阅读量1.6k

点赞数

分类专栏： ionic2 文章标签： angular angular2 ionic angular2+ angular4

本文链接：https://blog.csdn.net/kingbaron/article/details/78409443

版权

本文介绍了在Angular 4.4.3和Ionic 3.7.1项目中使用ngx-translate库进行国际化实践的详细步骤，包括在非懒加载和懒加载模块中的导入方式，TranslateModule的配置，以及TranslateService的初始化方法。项目源代码可在GitHub上查看。

摘要由CSDN通过智能技术生成

背景

最近基于angular 4.4.3和ionic 3.7.1写了一个lazyload的小程序，做i18n的一些实践整理。

框架

angular@4.4.4, ionic@3.7.1, @ngx-translate/core@8.0.0, @ngx-translate/http-loader@2.0.0

导入

非懒加载模块部分

可以在AppModule或者自定义的公共组件模块中去加载TranslateModule。
比如：

    import {BrowserModule} from '@angular/platform-browser';
    import {NgModule} from '@angular/core';
    import {TranslateModule} from '@ngx-translate/core';

    @NgModule({
    imports: [
        BrowserModule,
        TranslateModule.forRoot()
    ],
    bootstrap: [AppComponent]
    })
    export class AppModule { }

或者:

    @NgModule({
            exports: [
            CommonModule,
            TranslateModule
        ]
    })
    export class SharedModule { }

这里要注意点：在AppModule中导入的时候，使用了forRoot()方法，但是在公共模块SharedModule中导入的时候，不能使用TranslateModule.forRoot()方法。这样可能会使得整个依赖注入树中存在多个TranslateModule的实例。如果有必要的话，倒是可以使用TranslateModule.forChild()方法.

懒加载模块中

在懒加载的模块中，我们需要使用下面的方式:

@NgModule({
    imports: [
        TranslateModule.forChild({
            loader: {
  provide: TranslateLoader, useClass: CustomLoader},
            compiler: {
  provide: TranslateCompiler, useClass: CustomCompiler},
            parser: {
  provide: TranslateParser, useClass: CustomParser},
            missingTranslationHandler: {
  provide: MissingTranslationHandler, useClass: CustomHandler},