Angular 4 Ngx-translate 管道不起作用答案

【问题标题】：Angular 4 Ngx-translate pipe not workingAngular 4 Ngx-translate 管道不起作用
【发布时间】：2018-01-14 11:34:29
【问题描述】：

我想制作一个多语言的 Angular 4 应用程序。我已关注Angular 2 - Multilingual Support 上的答案但它不起作用。

我在该页面上执行了从 1 到 5 的每一步，我的 appmodule 看起来都一样。

我在我的资产文件夹中的 i18n 文件夹中有一个文件 en.json。该文件包含

{ "TEST":"little test"}

在我的 HTML 中：

 <a [routerLink]="['/home']" class="tile waves-effect waves-light btn-large">
  <span> {{ "TEST" | translate }}</span>
 </a>

当我使用它时，我得到的是 TEST 而不是小测试。这真的很烦人，因为我想添加多种语言。

编辑
我已将此代码添加到我的 appmodule.ts（仅需要添加）

import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';

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

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    HttpClientModule,
    MaterializeModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    FormsModule,
    JsonpModule,
    routing,
    BrowserAnimationsModule,
  ],

【问题讨论】：

标签： html angular typescript internationalization ngx-translate

【解决方案1】：

你可以这样试试吗？

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

【讨论】：

在您的情况下，您只需要使用http: HttpClient。
新错误：AppComponent_Host.html:1 错误错误：没有 TranslateService 的提供者！
import { TranslateService } from '@ngx-translate/core' 在您各自的 .ts 文件中
你能提供你的项目架构吗？你在使用angular-cli吗？
那么它应该可以工作 man.try 将此代码添加到您各自的 .ts 文件 constructor(private translate: TranslateService) { translate.addLangs(['en', 'es']); translate.setDefaultLang('en'); let browserLang = translate.getBrowserLang(); translate.use(browserLang.match(/en|es/) ? browserLang: 'en') }

【解决方案2】：

首先将 traslate 服务导入特色模块。内部模块构造函数使用：

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

【讨论】：

【解决方案3】：

您必须正确设置 i18n。这意味着在最好的情况下，这些导入在您的 app.module.ts 中用于 ionic4：

// i18n and globalization
import { Globalization } from '@ionic-native/globalization/ngx';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

如果您不知道如何安装 Globalization 或为什么要使用，请参阅：https://ionicframework.com/docs/native/globalization

你应该创建这个默认加载器方法：

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

并导入翻译模块

imports: [
..., // other stuff above
TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        }),
... // other stuff beyond
]

如果在cordova系统上，现在您可以使用全球化获取有关设备的信息：

this.globalization.getPreferredLanguage()

或使用您需要的模块中的语言预定义字符串设置硬代码。

this.translate.setDefaultLang(locale);
this.translate.use(locale);

但这里的最佳做法是将这些内容包含到共享模块中，并将此模块导入页面、组件等。

注意：不要忘记，如果您不告诉翻译服务使用哪种语言，它会在模板中显示您尝试使用翻译管道转换的字符串，您赢了'在大多数情况下看不到任何错误。

【讨论】：