从组件更新Angular 5指令

Question

I'm trying to do translation for a button so when I select language from a drop down I want to change the button text using a directive. Below are the respective codes. home.component.ts

this._i18nDirective.i18nLanguage contains the Object Key which I will pick from the language 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]]);
        }
    }

}`

So the setterMultiParams method is called to update the directive. The problem is: When I select Spanish it still shows me the English version but when I again choose English from the dropdown I get the Spanish version which I selected previously. Its not updating immediately.

This is the button:

<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

The problem was that my language object in ConfigService was not updated, this was causing to load the load json. This was my mistake

Add a delay for 250ms before calling

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

and it was working as expected