Труба Angular 4 Ngx-translate не работает

Я хочу сделать многоязычное приложение angular 4. Я следил за ответом на 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,
  ],

Структура проекта


typescript angular html internationalization ngx-translate
person fangio    schedule 07.08.2017    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Не могли бы вы попробовать так?

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

person k11k2    schedule 07.08.2017
comment
В вашем случае вам нужно использовать только http: HttpClient. - person k11k2; 07.08.2017
comment
новая ОШИБКА: AppComponent_Host.html:1 Ошибка ОШИБКИ: Нет провайдера для TranslateService! - person fangio; 07.08.2017
comment
import { TranslateService } from '@ngx-translate/core' в соответствующем файле .ts - person k11k2; 07.08.2017
comment
не могли бы вы предоставить архитектуру своего проекта и используете ли вы angular-cli? - person k11k2; 07.08.2017
comment
Тогда это должно сработать. Попробуйте добавить этот код в свой соответствующий .ts файл constructor(private translate: TranslateService) { translate.addLangs(['en', 'es']); translate.setDefaultLang('en'); let browserLang = translate.getBrowserLang(); translate.use(browserLang.match(/en|es/) ? browserLang: 'en') } - person k11k2; 07.08.2017
comment
Я использую свой канал перевода в других компонентах, а не в app.component - person fangio; 07.08.2017
comment
это не имеет значения, он получит язык браузера. напишите этот код в app.component.ts - person k11k2; 07.08.2017
comment
Давайте продолжим обсуждение в чате. - person fangio; 07.08.2017

arrow_upward
0
arrow_downward

Первый сервис импорта перевода в рекомендуемый модуль. Внутри конструктора модуля используйте:

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

arrow_upward
0
arrow_downward

Вы должны правильно настроить 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);

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

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

person dgbt    schedule 16.04.2019