Angular：未检测到管道变化

Question

我有这个管道，它将 input 值乘以从服务检索的另一个值：

@Pipe({
    name: 'multiply'
})
export class MultiplyPipe implements PipeTransform {
    constructor(private service: StateService) { }

    transform(value: any, args?: any): any {
        return value * this.service.multiplier;
    }
}

用法：

{{ value | multiply }}

DEMO

这工作正常，但是当来自服务的 multiply 值发生变化时，它不会触发任何变化检测，因此

 {{ value | multiply }}

不再是运行，在屏幕上留下旧值。关于如何解决这个问题有什么建议吗？

Answer 1

我认为问题在于，当组件访问 StateService 时会接收到事件，但管道不会。

要解决此问题，请将 MultiplyPipe 改为采用 multiplier 参数，而不是尝试访问 StateService:

transform(value: any, multiplier: any): any {
  return value * multiplier;
}

然后让 hello.component 访问 StateService，并将 multiplier 的值作为参数传递给管道：

import { Component, Input } from '@angular/core';
import { StateService } from './state.service';

@Component({
  selector: 'hello',
  template: `<h1>Value = {{value | multiply: this.service.multiplier}}</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  value = 10;

  constructor(private service: StateService) {}

这里的工作示例：DEMO

Answer 2

如 Angular documentation, and as shown in this stackblitz 中所述，强制调用管道的一种方法是使其不纯：

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

关于纯管道和不纯管道的更多详细信息，您可以查看this article。

Angular：未检测到管道变化

Angular: Change in Pipe not detected

angular

angular2-changedetection