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

Question

Я решил использовать библиотеку 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 is not a function at ReflectionCapabilities.parameters (http://localhost:4200/main.bundle.js:40295:47)

Я использую угловую-Cli, угловой 2.0.0 и НПМ So Я переключился на 4.2.0, который, похоже, отлично работает с моей конфигурацией.

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

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

   @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);  
       } 
   
       } 
   

   У кого-то были одинаковые проблемы?

Спасибо.

Answer 1

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

Устранение проблем с ohter 2 было связано с тем, насколько угловые работают и работают однотонные.

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

Answer 2

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