Угловая труба 4 Ngx-translate не работает

Question

Я хочу сделать угловое приложение, которое будет мультиязычным. Я следовал за ответом на Angular 2 - Многоязычная поддержка, но он не работает.

Я делал каждый шаг, с 1 по 5 на этой странице, и мой appmodule выглядит одинаково.

У меня есть файл en.json в папке i18n, которая находится в папке с активами. Файл содержит

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

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

Если вы не знаете, как установить 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
]

Теперь вы можете использовать Globalization для получения информации об устройстве, если в системе Cordova:

this.globalization.getPreferredLanguage()

или установите жесткий код с заранее определенными строками языка в необходимых вам модулях.

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

Но лучше всего включать этот материал в общий модуль и импортировать этот модуль на страницы, компоненты и т. Д.

ПРИМЕЧАНИЕ. Не забывайте, что если вы не укажете службе перевода, какой язык использовать, она всегда будет отображать строку, которую вы пытаетесь преобразовать с помощью канала перевода, в шаблонах, и в большинстве случаев вы не увидите никаких ошибок.