Ionic 3 with ngx-translate - 延迟加载

Question

我正在尝试通过延迟加载将 ngx-translate 插件集成到我的 Ionic 3 项目中。我遵循了 Ionic Framework 网站上的指南。

加载默认语言，但使用 translate.use() 完全没有效果。

我已将项目发布到 gitbub 上，如有任何帮助，我们将不胜感激。

这是回购的 link： https://github.com/sumodevelopment/ngx-translate-test

Answer 1

更新您的 home.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { Http} from '@angular/http';

export function createTranslateLoader(http: Http) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
      }
    })
  ],
  exports: [
    HomePage
  ]
})
export class HomePageModule {}

并且您的 app.module.ts

中无需使用 TranslateService 提供商

Answer 2

我花了几个小时让它工作。最后，我不得不将 HttpClientModule 添加到 app.module.ts 的导入部分（在您的情况下可能是 - home.module.ts）。希望对您有所帮助。

首先：导入HttpClientModule 第二：使用 HttpClient 而不是 Http.

所以，代码如下：app.module.ts（你的情况是home.module.ts）

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';

//translate related imports
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClientModule, HttpClient } from '@angular/common/http';

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

@NgModule({
    declarations: [
        HomePage,
    ],
  imports: [
    IonicPageModule.forChild(HomePage),
    HttpClientModule
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: (createTranslateLoader),
            deps: [HttpClient]
        }
    })
  ],
  exports: [
     HomePage
  ]
})

export class HomePageModule {}

在app.component.ts中添加这一行在constructor中。

import {TranslateService} from '@ngx-translate/core';
...
translate.setDefaultLang('en');//So English language set

然后您必须在 ./assets/i18n/ 路径中创建两个 JSON 文件。

en.JSON

{
   "title": "Translation demo",
   "text": "This is a simple demonstration app for {{value}}"
}

然后在您的应用中使用像这样的 PIPE 过滤器。

<h1>{{'title' | translate}}</h1>

或

<h1 [translate]="'title'"></h1>

我们也可以传一个parameter.

<h1>{{'text' | translate:{'value':'ngx-translate'} }}</h1>

或

<h1 [translate]="'text'" [translateParams]="{value: 'ngx-translate'}"></h1>

Answer 3

在花了很多时间解决这个确切的问题之后，我在这个 github 线程上找到了解决方案：https://github.com/ngx-translate/core/issues/574

具体来说，这解决了问题：

Only the page that is changing the language needs to have the second loader in it: (TranslateModule.forChild({...}). All other pages just need >TranslateModule.forChild()

所以你必须在 [your-lang-changing-page].module.ts 中添加你在 app.module.ts 中编写的相同内容，这次是 child:

使用的版本：

angular: 5.2.10
ngx-translate: 9.1.1
离子：3.2

我在第一个应用启动时通过按钮更改语言的示例 "tutorial.module.ts":

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TutorialPage } from './tutorial';
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {createTranslateLoader} from "../../app/app.module";
import {HttpClient} from "@angular/common/http";

@NgModule({
  declarations: [
    TutorialPage,
  ],
  imports: [
    IonicPageModule.forChild(TutorialPage),
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    })
  ],
  exports: [
    TutorialPage
  ]
})
export class TutorialPageModule { }

Ionic 3 with ngx-translate - 延迟加载

Ionic 3 with ngx-translate - Lazy loaded

multilingual

lazy-loading

ionic-framework

ngx-translate

angular