Углеродная директива по обновлению от компонента

Subrata Banerjee спросил: 26 декабря 2017 в 07:46 в: angular

Я пытаюсь сделать перевод для кнопки, поэтому, когда я выбираю язык из раскрывающегося списка, я хочу изменить текст кнопки с помощью директивы. Ниже приведены соответствующие коды. 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>


0 ответов