web-dev-qa-db-ja.com

Angular 4Ngx-変換パイプが機能しない

多言語の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>

そして、私がそれを使うとき、私は少しのテストの代わりにテストを得ます。複数の言語を追加したいので、これは本当に面倒です。

編集
このコードを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,
  ],

ProjectStructure

htmlangulartypescriptinternationalizationngx-translate
6
fangio

このようにしてみませんか？

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

6
k11k2

まず、traslateサービスを注目のモジュールにインポートします。モジュールコンストラクター内での使用：

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

I18nを正しく設定する必要があります。つまり、最良の場合、これらはionic4のapp.module.tsにインポートされます。

// 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);

ただし、ここでのベストプラクティスは、そのようなものを共有モジュールに含め、このモジュールをページやコンポーネントなどにインポートすることです。

注：使用する言語を翻訳サービスに指示しないと、変換しようとしている文字列が表示されることを忘れないでください。テンプレートに翻訳パイプがあり、ほとんどの場合エラーは表示されません。

0
dgbt