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

您无需在TranslateService

中使用app.module.ts提供商

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

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

en.JSON

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

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

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

OR

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

我们也可以传递parameter。

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

OR

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

离子3与ngx-translate - 懒惰加载

3 个答案: