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

更新：解决方案是将“ pure”标志设置为false。这样就解决了这个问题。

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

---上一个答案---

我有同样的问题。我发现，将语言作为参数有效。不是我希望的，但是这可能对某人有用。更改语言后，这将更新该字段。

在组件的构造函数中，使用管道随语言更改而订阅。另一种方法（您的方法）需要您重新加载组件：

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

  }

在组件中使用管道，如下所示：

<span>3 | TemperatureConverter : lang</span

Answer 3

感谢您发布博客。我遇到了与管道相关的相同问题。我试图在参数改变时调用管道。但这不是同步的正确方法。因此，我没有使用函数来显示值更改时的显示。而不是 {{ 标签 |标签格式 }}, 我使用了 {{ labelFormat(labels)}}。

我在 ts 文件中定义了 labelFormat 函数。谢谢。

Answer 4

您首先需要将管道注册到模块声明中。之后，您可以通过以下方式简单地在html页面中调用它：

{{ myTempDegree | temperatureConverter : 'fr' }}

可以观察到变化的调用管道

4 个答案: