Angular 4 Ngx-translate管不起作用

Question

我想制作一個多角度的角度4應用程序。 我已經按照Angular 2 - 多語言支持的答案，但它不起作用。

我做了每一步，在該頁面上從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 ： 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);

但這里的最佳做法是將這些內容包含在共享模塊中，並在頁面，組件等上導入此模塊。

注意：不要忘記，如果您沒有告訴翻譯服務使用哪種語言，它將在模板中顯示您嘗試使用翻譯管道轉換的字符串，並且在大多數情況下您不會看到任何錯誤。