角度:未检测到管道中的更改

Question

我有这个管道,它将输入值乘以从服务检索到的其他值:

@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

如Angular文档中所讨论的，以及此stackblitz中所示，强制调用管道的一种方法是使其不纯：

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

有关纯净管道和不纯净管道的更多详细信息，请参见本文。

Answer 2

我认为问题在于,如果组件在访问时接收事件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