Ionic 3与ngx-translate - 懒加载

Question

我正在尝试将ngx-translate插件与我的Ionic 3项目进行懒加载集成。我已经按照Ionic Framework网站上的指南进行了操作。默认语言可以加载，但是使用translate.use()没有任何效果。我已经将项目发布到gitbub上，非常感谢任何帮助。这是存储库的链接：https://github.com/sumodevelopment/ngx-translate-test。

- Dewald Els

---

这个解决方案对我有用 https://dev59.com/HqLia4cB1Zd3GeqPos78#44698964 - Sohan

你可以接受答案，我已经在Ionic社区发布了相同的答案。 - Sohan

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提供程序。

- Sohan

---

我会在本周内查看这个。当我尝试过后，我会更新这个评论。 - Dewald Els

当我尝试导入 @angular/http 时，出现了一个新的错误:Cannot find module '@angular/common/http'。每次使用 Ionic 都会遇到新问题，这让人非常沮丧。 - Dewald Els

尝试使用 @angular/http 而不是 @angular/common/http。 - Sohan

Answer 2

我花了好几个小时才让它正常工作。最终，我不得不在app.module.ts的导入部分中添加HttpClientModule（在你的情况下可能是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>

我们还可以传递一个参数。

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

或者

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

- Ajay Gupta

Answer 3

在花费大量时间解决这个问题后，我在这个GitHub主题上找到了解决方案：https://github.com/ngx-translate/core/issues/574

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

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

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

使用的版本：

• angular: 5.2.10
• ngx-translate: 9.1.1
• ionic: 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 { }

- Alex