Звони на смену с заметным

Question

У меня есть пользовательская труба для преобразования температуры. Я хочу вызвать этот канал на запущенном компоненте (готово) и когда значение lang меняется (не работает). Вы можете мне помочь?

Моя труба:

@Pipe({
  name: 'temperatureConverter'
})
export class TemperatureConverterPipe implements PipeTransform {
value: number;

constructor(private _translateService: TranslateService, private language: LanguageProvider) {
    this.language.getLanguage().subscribe((value) => {
        this.transform(this.value, value.lang);
    })

}

transform(value: number, unit : string = this.language.selectedLanguage) {
    this.value = value;

    if(value && !isNaN(value)){

        if(unit === 'fr'){
            let tempareature = (value - 32) / 1.8 ;
            return tempareature.toFixed(2) + " °C";
        }
        if(unit === 'en'){
            let tempareature = (value * 32) + 1.8 ;
            return tempareature.toFixed(2) + " F";
        }
    }
    return;
}

}

Answer 1

Если вы собираетесь подписаться на наблюдаемое внутри трубы, то вы должны отписаться , когда труба разрушена. Вы используете takeUntil () для автоматической отмены подписки с помощью обратного вызова ngOnDestroy .

 export class TemperatureConverterPipe implements PipeTransform, OnDestroy {
     private _destroyed: Subject<void> = new Subject();
     public ngOnDestroy {
        this._destroyed.next();
        this._destroyed.complete();
     }
 }

Когда вы изменяете внутреннее состояние трубы, вы должны уведомить Angular об изменении view . Вы можете сделать это, используя ChangeDetectorRef .

 private lang: any;

 constructor(private _translateService: TranslateService, 
             private language: LanguageProvider,
             private ref: ChangeDetectorRef) {
     this.language.getLanguage()
          .pipe(takeUntil(this._destroyed))
          .subscribe((value) => {
                 this.lang = value;
                 ref.markForCheck();
           });
}

Теперь вы можете использовать значение из службы getLanguage() в функции преобразования.

transform(value: number, unit?: string) {
   unit = unit || this.lang;
   ....
}

Когда служба выдает изменение языка, канал запускает обнаружение изменений в представлении, и вы должны увидеть представление обновленным.

Answer 2

сначала нужно зарегистрировать ваши каналы в объявлениях вашего модуля. После этого вы можете вызвать его внутри html-страницы просто

{{ myTempDegree | temperatureConverter : 'fr' }}