5

私のプロジェクトは Angular CLI でセットアップされているため、webpack でビルドされていますが、webpack 構成ファイルは非表示になっています。

と の 2 つのファイルをnl.json取得しましたが、正しいフォルダーに移動するように見えますが、両方の をfr.json取得します: 。404http://localhost:4200/i18n/nl.json

それらの構造は次のとおりです。

{
  "SEARCH_PAGE": {
    "searchPerson": "Zoek een persoon",
    "search": "Zoek"
  }
}

でapp.module：

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

と

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

私はまた、翻訳を使用[しようとする]サブモジュールにこれらを含め.forChildます.forRoot.

私のコンポーネントでは：

  constructor(translate: TranslateService) {
    translate.addLangs(["nl", "fr"]);
    translate.setDefaultLang('nl'); // this language will be used as a fallback when a translation isn't found in the current language

    let browserLang: string = translate.getBrowserLang();
    translate.use(browserLang.match(/nl|fr/) ? browserLang : 'nl');
  }

リンクされていないものngx-translateでしょうか？パイプ<h1>{{ 'SEARCH_PAGE.searchPerson' | translate}}</h1>を使用すると画面に何も表示されませんが、ディレクティブ<h1 translate]="'SEARCH_PAGE.searchPerson'"></h1>を使用すると文字通り文字列が表示されます。

4

5 に答える 5

0

APP_INITIALIZER を使用して、デフォルトの lang を translateService にフートしてみてください:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { FormsModule, Validators, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HttpClient } from '@angular/common/http';

import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RouterInputService } from './services/router-input.service';
import { Observable } from 'rxjs/Observable';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, '/private/lifeinsurance/assets/', '.json');
}
export function initTranslation(translate: TranslateService) {
  return () => {
    translate.setDefaultLang('en');
    translate.use('en');
    return Promise.resolve();
  };
}
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })
  ],
  providers: [
    {
      'provide': APP_INITIALIZER,
      'useFactory': initTranslation,
      'deps': [TranslateService],
      'multi': true
    },
    RouterInputService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
于 2018-07-30T16:00:33.127 に答える