3
votes

Appelez le tuyau en cas de changement avec observable

J'ai un tuyau personnalisé pour la valeur de la température de transformation. Je veux appeler ce tuyau sur le composant démarré (terminé) et lorsque la valeur de la langue change (ne fonctionne pas). Pouvez-vous m'aider?

Ma pipe:

@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;
}

}

angular observable pipe

1 commentaires

Les tubes sont appelés à partir des composants, et ils renvoient une simple valeur à rendre. Ce que vous demandez n'a pas de sens, il ne peut pas être traité seul.

3 Réponses :

-1
votes

vous devez d'abord enregistrer vos tubes dans vos déclarations de module. Après cela, vous pouvez l'appeler dans votre page html simplement par

{{ myTempDegree | temperatureConverter : 'fr' }}

4 commentaires

Cela ne répond pas à la question du PO, la valeur rendue ne sera pas mise à jour lorsque le LanguageProvider émettra un nouveau selectedLanguage .

ne peut-il pas utiliser BehavıorSubject pour myTempDegree?

Ils pourraient, mais alors il faudrait passer par async avant de frapper temperatureConverter et il ne va toujours pas fusionner les deux flux.

attendons le commentaire des OP. Je crois que ce message est déjà hors de portée. btw merci pour ton commentaire

0
votes

Si vous allez vous abonner à une observable à l'intérieur d'un tube, alors vous devez vous désabonner lorsque le tube est détruit. Vous utilisez takeUntil () pour vous désabonner automatiquement en utilisant le rappel ngOnDestroy .

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

Lorsque vous modifiez le interne état du tube, vous devez alors informer Angular que la vue a changé. Vous pouvez le faire en utilisant le 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();
           });
}

Vous pouvez maintenant utiliser la valeur du service getLanguage () dans la fonction de transformation.

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

Lorsque le service émet un changement de langue, le tube déclenchera la détection de changement sur la vue et vous devriez voir la vue mise à jour. p>

0 commentaires

0
votes

MISE À JOUR: La solution est de mettre le drapeau "pur" sur false. Cela résout le problème.

<span>3 | TemperatureConverter : lang</span

--- Réponse précédente ---

J'ai le même problème. Ce que j'ai découvert, c'est qu'avoir la langue comme paramètre fonctionne. Pas ce que j'espérais, mais cela pourrait fonctionner pour quelqu'un. Cela mettra à jour le champ lorsque la langue sera modifiée.

Dans le constructeur du composant en utilisant le tube, abonnez-vous à mesure que la langue change. L'autre façon (à votre façon) nécessite que vous rechargiez le composant:

lang: string;
constructor(private languageService: LanguageService) {
    this.languageService.language$.subscribe(l => this.lang = l);

  }

Dans le composant, utilisez le tube comme ceci:

@Pipe({
  name: 'TemperatureConverter',
  pure: false
})

0 commentaires