Angular ng2-translate не работает в дочернем компоненте корневого компонента

Я решил использовать библиотеку ng2-translate для интернационализации приложений, так как она кажется лучше, чем реализация по умолчанию. Но столкнулся со следующими проблемами.

Вот мой код:

app.module.ts:

import { TranslateModule } from 'ng2-translate';
@NgModule({
imports: [
    BrowserModule,
    HttpModule,
    TranslateModule.forRoot(),
    appRoutes
],

app.component.ts

   @Component({
 selector: 'fiv-app',
 templateUrl: './app.fivtemplate.html',
 providers: [TranslateService]
   })
  .....
 constructor(private _translateService: TranslateService) {
      this.langs= ['fi','en'];
     _translateService.addLangs(["en", "fi"]);
     _translateService.setDefaultLang('fi');
     let browserLang = _translateService.getBrowserLang();
      _translateService.use('fi');
   }
   .....

app.component.html

 <fiv-hello></fiv-hello>
<h2>{{ 'HOME.TITLE' | translate }}</h2>

и fivhello.component.ts

<h2>{{ 'HOME.TITLE' | translate }}</h2>
<div [translate]="'HOME.TITLE'"> Test</div>
  1. Я пытался использовать последнюю версию, 5.0.0, но получаю эту ошибку:

Uncaught TypeError: ctorParameters.map не является функцией в ReflectionCapabilities.parameters (http://localhost:4200/main.bundle.js:40295:47)

Я использую angular-cli , angular 2.0.0 и npm. Поэтому я переключился на 4.2.0, который, кажется, отлично работает с моей конфигурацией.

  1. Текст из app.component.html переведен. Но тот, что из компонента fivhello, не локализован. Он просто отображает HOME.TITLE. При отладке я заметил, что функция get из TranslateService вызывается позже, после рендеринга, но я ожидал, что текст будет обновлен.

  2. После изменения используемого языка дом также не обновляется. Компонент, который используется для смены языка, следующий:

    @Component({
    selector: 'language-option',
    templateUrl: './languageoption.component.html',
    styleUrls: ['./languageoption.component.css'],
    providers: [ TranslateService ]
  })
export class LanguageoptionComponent implements OnInit {
  langs : String [];

 constructor(private _translateService: TranslateService) {
   this.langs = ['fi', 'en'];
 }

  ngOnInit() {
  }

  public changeLocale = (locale) => {
      this._translateService.use(locale);     
   }

  }

    Кто-нибудь встречал такие же проблемы?

Спасибо.


angular ng2-translate
person csm86    schedule 11.01.2017    source источник
comment
github.com/ocombe/ng2-translate/issues/376   -  person ranakrunal9    schedule 11.01.2017
comment
Спасибо. Я надеялся, что смогу запустить его с реальной конфигурацией. Но я постараюсь обновить и, надеюсь, другие проблемы будут исправлены.   -  person csm86    schedule 11.01.2017

Ответы (2)


arrow_upward
0
arrow_downward

Обновив до последней версии angular и angular-cli, мне удалось избавиться от ошибки для версии 5.0.0. Так что я могу использовать его.

Исправление для других проблем 2 было связано с тем, как работает angular и одноэлементными службами.

Я добавил TranslateService к провайдеру корневого компонента, где я его настроил. Но я также добавил дочерний компонент и внешний компонент, который меняет язык. И кажется, что они создают другой экземпляр этой службы, конечно, не настраивая. Достаточно было просто удалить его из списка поставщиков других компонентов, чтобы решить обе проблемы.

person csm86    schedule 11.01.2017

arrow_upward
0
arrow_downward

Вы должны добавить в дочерний модуль: TranslateModule.forChild({....})

person Klaudia    schedule 02.10.2017
comment
Пожалуйста, добавьте больше деталей к ответам. Хотя иногда короткий ответ отлично решает проблему, он не всегда лучший. Покажите ссылки, объясните, что делает код,... - person LW001; 02.10.2017