Question

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

我无法理解不纯净的管道，有些管道更好。

请用一个简单而基本的例子来解释我？

Answer 1

仅当Angular检测到值或传递给管道的参数发生变化时，才会调用纯管道。无论值或参数是否发生变化，每个变化检测周期都会调用一个不纯的管道。

这与Angular未检测到的更改相关

当您传递一个更改了内容的数组或对象（但仍然是同一个实例）时
当管道注入服务以访问其他值时，Angular不会识别它们是否已更改。

在这些情况下，您可能仍希望执行管道。

您应该意识到不纯净的管道容易低效。例如，当一个数组被传递到管道中进行过滤，排序，......那么这项工作可能会在每次更改检测运行时完成（这通常特别是对于默认的ChangeDetectionStrategy设置）事件，尽管数组可能会甚至没有改变。你的管道应该尝试识别这个，例如返回缓存的结果。

Answer 2

除了之前的回答，我想添加另一个区别：实例数。

假设在HTML代码中多次使用管道。像：

<p> {{'Hello' | translate }}<p>
<p> {{'World' | translate }}<p>

如果管道是纯净的：只有一个管道实例。 transform方法将在同一个实例上调用两次。
如果管道不纯，则会有两个管道实例。

（您可以通过在管道的构造函数中生成随机ID并在两者中进行打印来查看：constructor和transform方法）

由于纯管道（或通常是纯函数）确实（应该）没有任何副作用，所以相同的纯代码可以重复使用多次而不用担心。似乎这就是纯管道只被实例化的原因。

OBS：这在我的角度4.0环境中有效。

Answer 3

Click for demo on StackBlitz

在angular中，pipe可以用作pure和impure

什么是纯净管或不纯净管？

简单地说，
impure-pipe适用于component中的每一项更改
pure-pipe仅在加载component时有效。

如何使管道纯净或不纯？

@Pipe({
  name: 'sort',
  pure: false //true makes it pure and false makes it impure
})
export class myPipe implements PipeTransform {

  transform(value: any, args?: any): any {
     //your logic here and return the result
  }

}

如何使用它？

<div> {{ arrayOfElements | sort }}<div>

使用不纯管道时要小心，因为如果使用不当，这可能会过度使用系统资源。

Read in depth on Pure vs Impure Pipe

Answer 4

纯净和不纯净管道

纯管道是仅在将“ PURE CHANGE”更改为“ 检测到输入值。
- 纯粹的更改是对原始输入（字符串，数字等）的值。或更改了对象引用。
默认情况下，管道是纯管道。
因此，无论源是否更改，每次都会执行不纯管道。这会导致性能下降。这就是为什么不建议使用管道过滤数据的原因。

使管道不纯：

  name: 'empFilter',
  pure: false  // default is set to true.
})
export class EmpFilterPipe implements PipeTransform {

  transform(employees: Employee[], searchValue?: string): Employee[] {

   }
}

<input type="text" [(ngModel)]="searchValue">
<button (click)="changeData()"></button>

changeData(): void{
    this.employees[0].name = "SOMETHING ELSE";
}

<div *ngFor="let emp of employees | empFilter : searchValue">
    {{emp.name}}
</div>

NOTE : if pipe is pure and  employees data is changed using method "changeData()" - It will not detect the changes .
     Since input value to the  EmpFilterPipe is Object & reference of "employees"  has not been changed.

Answer 5

“纯管道”：

纯管道使用纯函数。仅当Angular检测到值或参数发生更改时才调用作为输入传递给管道。纯管道比不纯管道具有许多优势：
仅当传递的值或参数发生变化时，纯管道才会重估。
纯管道将缓存先前值或输入的结果。因此，纯管道可以绑定来自缓存而不重新评估输入是否不变。
在所有组件中使用纯管道的单个实例。
我们只需要针对已知的输入和输出进行测试。
纯管道评估输入值（字符串，数字，布尔值）或在对象引用（日期，数组，对象）中。
对于纯管道，输入不应是可变的。

“不纯管道”：

在Angular中的每个更改检测周期上都会调用不纯管道。无论输入或值的变化如何，都在每个摘要周期调用它。如果我们需要在每次更改检测时调用某个管道，请将该管道标记为不纯。对于管道不纯净的情况，Angular会在每个更改周期上调用transform（）方法。
为不纯管道创建了多个实例。
不正确使用管道。
如果管道不纯净，我们将无法使用缓存。
取决于某些内部状态。
在每个变更检测周期调用。
传递给该管道的输入可能是可变的。

不纯管道的示例

a。异步管道

b。 JsonPipe和SlicePipe

.ts文件

*.csv
*.pkl

.html文件

import { PipeTransform, Pipe } from '@angular/core';
import { User } from './User';

// Pipe
@Pipe({
  name: 'filter',
  pure: true    ----> 'Default is true'
})
export class FilterPipe implements PipeTransform {
  transform(users: User[], searchTerm: string): User[] {
    if (!users || !searchTerm) {
      return users;
    }
    return users.filter(user => user.name.toLowerCase()
      .indexOf(searchTerm.toLowerCase()) !== -1);
  }
}

什么是Angular不纯的管道？

5 个答案:

Click for demo on StackBlitz

如何使管道纯净或不纯？

如何使用它？

“纯管道”：

“不纯管道”：