带有 ngx-translate 的 Ionic 3 - 延迟加载

Question

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

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

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

这里是回购的链接： 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 Provider

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

具体解决了这个问题：

只有更改语言的页面需要第二个加载器： (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 { }