從組件更新Angular 5指令

Question

我正在嘗試翻譯按鈕，因此當我從下拉菜單中選擇語言時，我想使用指令更改按鈕文本。 以下是各自的代碼。 home.component.ts

this._i18nDirective.i18nLanguage包含我將從JSON語言中選擇的對象密鑰。

export class HomeComponent implements OnInit {

    appSelectLanguages: any = [];
    selectedAppLangaugeValue = '';
    @ViewChild(I18nDirective) _i18nDirective;
    constructor() { }

    ngOnInit = () => {
    }

    appLanguageChange__Event = () => {
        this._i18nDirective.setterMultiParams(this._i18nDirective._el.nativeElement, this._i18nDirective.i18nLanguage);
    }
}`

i18ndirectve：

`import { Directive, ElementRef, HostListener, Input, Renderer, ViewContainerRef } from '@angular/core';
import { NGXLogger } from 'ngx-logger';
import * as _ from 'underscore';
import { ConfigService } from '../providers/config.service';
import { HttpService } from '../providers/http.service';

@Directive({
  selector: '[appI18n]'
})
export class I18nDirective {

    private i18nLanguage: any = {};

    constructor(
        private _ConfigService: ConfigService,
        private _Logger: NGXLogger,
        private _el: ElementRef,
        private _Renderer: Renderer,
        private _HttpService: HttpService
    ) {
        this._ConfigService.appLanguageEvent.subscribe(value => {this.i18nLanguage = value; this._Logger.debug(value); });
     }

    @Input() set appI18n (_key: string) {
        if (this.i18nLanguage && this.i18nLanguage.data) {
            this.setter(_key);
        }
        else {
            this._HttpService.languageGetter(this._ConfigService.defaultLanguage).subscribe(response => {
                const appLangData: any = {};
                appLangData.data = response;
                appLangData.action = 'SET_APP_LANGUAGE';
                this._ConfigService.setter(appLangData);
                setTimeout(() => {
                    this.setter(_key);
                }, 1000);
            });
        }
    }

    setter = (_key) => {
        if (this.i18nLanguage.hasOwnProperty(_key)) {
            this._Renderer.setElementProperty(this._el.nativeElement, 'innerHTML', this.i18nLanguage[_key]);
        }
    }

    setterMultiParams = (_element, _key) => {
        const _keyName = Object.keys(_key);
        if (this.i18nLanguage.hasOwnProperty(_keyName)) {
            this._Renderer.setElementProperty(_element, 'innerHTML', this.i18nLanguage[_keyName[0]]);
        }
    }

}`

因此，將setterMultiParams方法來更新指令。 問題是：當我選擇西班牙語時，它仍然顯示英語版本，但是當我再次從下拉列表中選擇英語時，我得到了之前選擇的西班牙語版本。 它不會立即更新。

這是按鈕：

<button mat-raised-button color="primary" class="_rx_fat_button _rx_footer_single_btn" appButtonAction [appButtonActionLabel]="'GET_STARTED'"><span [appI18n]="'GET_STARTED'"></span></button>

Answer 1

問題是我的ConfigService中的語言對象未更新，這導致加載load json。 這是我的錯

通話前增加250ms的延遲

this._i18nDirective.setterMultiParams(this._i18nDirective._el.nativeElement, this._i18nDirective.i18nLanguage);

它按預期工作