4

I'm trying to integrate the ngx-translate plugin into my Ionic 3 project with lazy loading. I've followed the guide on the Ionic Framework website.

The default language loads but using translate.use() has no effect at all.

I've posted the project on gitbub and any help would be greatly appreciated.

Here is the link to the repo: https://github.com/sumodevelopment/ngx-translate-test

4

3 回答 3

4

更新您的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 {}

并且无需TranslateService在您的app.module.ts

于 2017-06-23T04:58:49.027 回答
1

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

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

只有改变语言的页面需要第二个加载器：(TranslateModule.forChild({...})。所有其他页面只需要 >TranslateModule.forChild()

因此，您必须在 [your-lang-changing-page].module.ts 中添加您在 app.module.ts 中编写的相同内容，这次是针对孩子：

使用版本：

  • 角度：5.2.10
  • ngx 翻译：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 { }

于 2018-06-20T08:39:26.637 回答
1

我花了几个小时让它工作。最后，我不得不添加到（在你的情况下可能是 - ）HttpClientModule的导入部分。希望有帮助。app.module.tshome.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

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

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>
于 2018-01-24T08:54:22.250 回答