Angular 离子3与ngx翻译-惰性加载

我正试图通过延迟加载将ngx翻译插件集成到我的Ionic 3项目中。我遵循了爱奥尼亚框架网站上的指南

默认语言加载，但使用

translate.use（）

完全无效

我已经在gitbub上发布了这个项目，任何帮助都将不胜感激

以下是回购协议的链接：

---

更新您的

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中使用
翻译服务
提供商

我花了数小时让它工作。最后，我不得不将

HttpClientModule

添加到

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 {}

第一：导入

HttpClientModule

第二：使用

HttpClient

而不是

Http

因此，代码如下所示：

app.module.ts

（在您的示例中，

home.module.ts

）

在

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>

或

---

在花了大量时间解决这个问题后，我在这个github线程上找到了解决方案：

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

只有更改语言的页面才需要第二个加载程序： （TranslateModule.forChild（{…}）。所有其他页面只需要>TranslateModule.forChild（）

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

使用版本：

• 角度：5.2.10
• ngx翻译：9.1.1
• 离子型：3.2

通过按钮“tutorial.module.ts”更改第一个应用程序启动时的语言的示例：

从'@angular/core'导入{NgModule}；
从“离子角度”导入{IonicPageModule}；
从“./tutorial”导入{TutorialPage}；
从'@ngx translate/core'导入{TranslateLoader，TranslateModule}；
从“./../app/app.module”导入{createTranslateLoader}”；
从“@angular/common/http”导入{HttpClient}；
@NGD模块({
声明：[
家教时代，
],
进口：[
IonicPageModule.forChild（教程页面），
TranslateModule.forChild({
加载器：{
提供：TranslateLoader，
useFactory:createTranslateLoader，
deps:[HttpClient]
}
})
],
出口：[
家教年龄
]
})
导出类教程管理模块{}

这里的解决方案对我有效，你们可以接受答案，就像我在爱奥尼亚社区上发布的答案一样。我将在本周对此进行检查。我将在试用后更新此评论。当我尝试导入@angular/http时，我遇到一个新错误：

找不到模块'@angular/common/http'。

每次使用爱奥尼亚我都会遇到一个新问题。这变得非常令人沮丧。试着用

@angular/http

代替

@angular/common/http

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

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

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