Angular 4 Ngx-translate管不起作用

Question

我想创建一个多角度的角度4应用程序。 我已按照Angular 2 - Multilingual Support的回答 但它不起作用。

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

我在一个文件夹i18n中有一个文件en.json，位于我的assets文件夹中。 该文件包含

{ "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,
  ],

Answer 1

你能尝试这样吗？

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

Answer 2

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

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

Answer 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';

如果您不知道如何安装全球化或为什么要使用它，请参见：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);

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

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