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

我认为问题在于，如果组件在访问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) {}的值作为参数传递给管道：

Application namespace for attribute bind:font will be ignored.

这里的工作示例：DEMO

Answer 2

如Angular documentation中所述，并且如this stackblitz所示，强制管道被调用的一种方法是使其不纯：

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

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

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

2 个答案: