Angular 2 TranslateService 检测语言变化

Question

如何检测其他组件的语言变化？我的检测是在 header 组件中进行的。我的目标是检测语言变化并设置样式。

Child 分量：

import { TranslateService } from "ng2-translate";
export class ChildComponent{
    public browserLang: string;
    constructor(private translate: TranslateService) {
        this.browserLang = translate.getBrowserLang();
    }
}

Html 共 child：

<div ng-class="{black: browserLang == 'en', red: browserLang == 'de'}" >

结果是：未添加 Class。如果我输出语言字符串 (en) 是正确的。但它没有监听任何变化。如何让它监听和改变类?

Answer 1

添加这些就可以了：

import {TranslateService, LangChangeEvent} from "ng2-translate"

export class ChildComponent {
    public browserLang: string;
    constructor(private translate: TranslateService) {
        translate.onLangChange.subscribe(lang=>{
            this.browserLang = lang;
        })
    }
    ngOnInit(){
        this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
            this.browserLang = event.lang
        });
    }
}

Angular 2 TranslateService 检测语言变化

Angular 2 TranslateService detect language change

html

javascript

angular-translate

angular