标签: ngx-translate

我正在使用最新的Angular5构建应用程序,我需要的是用户能够切换语言.我从来没有在Angular2 +中实现它(实际上我使用的是Angular5).

我需要在两个地方设置翻译:

• 组件的模板html - 将标签更改为指定的语言
• 在component.ts文件的代码中 - 我可能需要翻译一些在代码中的特定条件下动态构建的字符串

我正在寻找ngx-translation,它看起来可以做我需要的一切,因为它允许你在不重建代码的情况下更改语言,请参阅此处.但是我读到它可能会被弃用,因为主要开发人员转向角度团队来开发他们的i18n代码.

我也明白,目前的i18n并不支持我现在需要的一切,请看这里.

我的问题 - 在最新版本的Angular中翻译的状态是什么？是否还有其他人推荐的图书馆,如果确实如此,Angular本身还没有完全支持(用于更改语言而不重新编译)？ngx-translate对未来有益吗？

非常感谢在这方面的任何指导!

我希望获得当前语言this.translate.getBrowserLang(),但无论当前语言是什么以及支持的语言是什么,它总是返回'en'.

这是plunkr:https://plnkr.co/edit/JEXgj8WcISYGtDg75VoR ？ p = preview ,

我正在使用这个@ngx-translate/core i18n服务,它使用以下语法在模板(.html)中工作正常:

{{ 'my.i18n.key' |翻译}}

现在我想在我的组件打字稿文件(.ts)中翻译一些内容,但我不知道如何使用它.

我可以在构造函数中创建translate对象:

构造函数(私有翻译:TranslateService){}

现在如何翻译'my.i18n.key'？

翻译(Angular)应用程序有多种方法,主要的主要方法是:

NGX-翻译

和

Angular 2原生i18n

到目前为止,据我所知,i18n对搜索引擎优化更容易,因为浏览网页很干净

例如

app.com/de

app.com/en

另一方面,使用ngx-translate,在语言之间切换更容易.

我知道ngx-translate的创建者是由Angular聘用的i18n. 任何人都可以说我的主要区别是什么(优点/缺点)？

我读过i18n运行时支持是以角度6来的,但是在rc3中找不到任何东西.是推迟还是没有记录？i18n文档仍然表明,不必为每种语言构建单独的构建.

https://github.com/ngx-translate是另一种选择,但我不知道这将支持多长时间,或者Angular 6中的支持是完全不同的.稍后迁移将包括重写代码中的所有i18n实例并创建新的翻译文件.我有空间等待我的项目,但不是永远.

无法找到关于Angular 6中新的i18n支持的内容,除非它即将到来.

我正在开发一款Ionic 2移动应用,并希望使用ngx-translate功能.在本教程之后,我将在app模块中导入必要的文件,如下所示:

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpModule, Http } from '@angular/http';
...

export function createTranslateLoader(http: Http) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

这给出了错误:

 Argument of type 'Http' is not assignable to parameter of type 'Http'.
 Property 'handler' is missing in type 'Http'

我认为ngx-translate预期的包装不匹配,但我无法弄清楚是什么以及如何.我的@ angular/http版本是4.3.2有谁知道该怎么办？

我已下载了ngx-translate/core软件包,并按照文档说明进行操作.

我无法让翻译工作.我做的步骤:

1]定义AppModule中的所有内容

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { TranslateModule } from '@ngx-translate/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { routing } from './app.routes';

import { AppComponent } from './app.component';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

    @NgModule({
     declarations: [
    AppComponent
  ],
  imports: [ …

我试图通过使用translate.instant(参数)创建一个接受字符串键并返回翻译后的字符串值的方法.问题是它返回键(参数).通常,如果找不到翻译,则返回此选项.我认为问题是在加载器加载转换之前调用方法.

我的app.module.ts导入:

    TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: (createTranslateLoader),
    deps: [HttpClient]
  }
})

createTranslateLoader函数:

    export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

在我的app.component中:

constructor(public translate: TranslateService){
   translate.setDefaultLang('en');
   translate.use('en');
}

当我使用管道翻译html时,它可以正常工作.

嗨,几天以来我试图解决这个问题但没有成功.当我尝试使用管道翻译时,我得到了这个错误

Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'translate' could not be found ("
<ion-content padding>
<h2>{{[ERROR ->]"HELLO" | translate }}</h2>
</ion-content>
"): ng:///AdminPannelPageModule/AdminPannelPage.html@11:8

我正在使用角5.

这些是我用于翻译的版本

"@ngx-translate/core": "^9.1.1",
"@ngx-translate/http-loader": "^2.0.1",

Npm安装

npm install @ngx-translate/core @ngx-translate/http-loader --save

这是我的Home.html页面

<h2>{{"HELLO" | translate }}</h2>

用于翻译的JSON文件:

assets/i18n/en.json

{
"HELLO": "hello"
}

assets/i18n/it.json

{
"HELLO": "ciao"
}

在导出我使用export function setTranslateLoader (http: HttpClient)而不是使用export function setTranslateLoader (http: Http)因为如果不是它给了我这个错误:Argument of type 'Http' is not assignable to parameter of type 'HttpClient …

可能是最常见的问题之一，而我发现的文档和其他一些问题试图为我解决问题，但是我仍然不确定如何解决此问题。

这是我的结构：

• 应用模块当然是引导的主要模块
• Countryselector模块：负责加载默认国家（基于IP），并根据浏览器决定使用哪种语言。基本上，它是决定使用哪个国家/地区语言的核心功能，并且包含一个供用户更改国家/地区语言的下拉菜单。
• 结帐模块，选择模块，付款模块都通过路由延迟加载。

应用模块

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    AppRoutingModule,
    ContrySelectorModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  export class AppModule { }

CountrySelectorModule

@NgModule({
  declarations: [CountryselectorComponent],
  imports: [
    CommonModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  exports: [
    CountryselectorComponent
  ]
})
export class ContrySelectorModule { }

选择模块：

@NgModule({ …