루트 구성 요소의 하위 구성 요소에서 Angular 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는하지만이 오류 얻을 : 나는 그래서-각 ​​CLI, 각 2.0.0과 NPM 을 사용하고

Uncaught TypeError: ctorParameters.map is not a function at ReflectionCapabilities.parameters (http://localhost:4200/main.bundle.js:40295:47)

을 4.2.0으로 바꿨는데 내 구성에서 제대로 작동하는 것 같습니다.

2. app.component.html의 텍스트가 번역되었습니다. 그러나 fivhello 구성 요소 중 하나는 현지화되지 않았습니다. HOME.TITLE 만 표시합니다. 디버깅 할 때 렌더링 후 TranslateService의 get 함수가 나중에 호출되지만 텍스트가 업데이트 될 것으로 예상됩니다.

3. 사용할 언어를 변경 한 후에는 dom도 업데이트되지 않습니다. 언어를 변경하는 데 사용되는 구성 요소는 다음과 같습니다.

   @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

각도 및 각진 최신 버전으로 업데이트하여 5.0.0 버전의 오류를 제거했습니다. 그래서 나는 그것을 사용할 수있다.

ohter 2 문제에 대한 해결책은 각도가 작동하는 방식과 싱글 톤 서비스와 관련이 있습니다.

내가 구성한 루트 구성 요소 공급자에게 TranslateService를 추가했습니다. 그러나 하위 구성 요소와 언어를 변경하는 외부 구성 요소도 추가했습니다. 그리고 그들이 구성되지 않은이 서비스의 다른 인스턴스를 만드는 것처럼 보입니다. 단순히 다른 구성 요소의 공급자 목록에서 제거하면 두 가지 문제를 모두 해결할 수 있습니다.

Answer 2

자식 모듈에 TranslateModule을 추가해야합니다. 어린이 용 ({....})