手动触发管道更新

Question

我创建了一个可以使用 . However, when the object is updated, the pipe does not update. I have found a solution 的管道，方法是将有状态管道与 pure: false 结合使用。

就我的用例的性能而言，此解决方案是不可接受的，因为它会为每次更改刷新管道（我几乎在任何地方都使用此管道来呈现复杂元素）。

有没有办法触发管道的手动刷新，以便它只在我需要时刷新？

这里是 plunker - 要查看问题，请尝试通过单击 - 按钮删除名称。如果你添加 pure:false 你会发现它会起作用：

@Pipe({name: 'keys', pure: false})
export class Keys implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

我想在我的 delName() 函数中添加一些东西，以便更新管道...

Answer 1

第一种方式：参数

使纯管道变得不纯的一种方法是在您的Pipe中添加parameter。

想刷新的时候改参数就行了

第二种方式：不带参数

Pure Pipe 将在输入有新实例时触发。因此，对于 TypeScript 2.1+，以下代码将使用新实例复制原始对象，并导致纯管道被触发。

    let copy = { ...original }

负面影响

这将强制您的组件在每次变量更改其值时刷新您的管道，即使这不是管道包含的那个

Stackblitz

两种方式都包含在stackbliz demo.

Answer 2

带有输入对象的纯管道只会在对象的引用发生变化时发出更新。

如果您能找到一种方法在对象的部分结构发生变化时用新实例替换，纯管道将根据需要自动更新其输出。

假设您现有的 delName 函数只是从现有结构中删除一个元素：

this.elements.remove(0);

您可以通过将 this.elements 替换为新版本来更新它：

this.elements = this.elements.splice(1);

Answer 3

创建一个管道，这里有两种解决方法：

1，但是这种方式会被多次触发，对网站不好。

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

2.Using ngModel + 纯管道

    <input 
                style="position: absolute;
                z-index: -1;"
                [(ngModel)]="detectedChangeRef">
this.detectedChangeRef = Math.random();

你的 html，因为管道会注意到你的引用的变化，它会触发你的管道：


   *ngFor="let item1 of item | tablepipe:detectedChangeRef;">

你的烟斗

     transform(value,detectedChangeRef) {
    console.log(detectedChangeRef);
     // do sth..
}

手动触发管道更新

Manually trigger pipe update

angular-pipe

angular

第一种方式：参数

第二种方式：不带参数

负面影响

Stackblitz