Angular 中的不纯管道是什么？

Question

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

我无法理解不纯的管道。

纯管道和不纯管道有什么区别？

请用一个简单和基本的例子来解释。

Answer 1

纯管道仅在Angular检测到传递给管道的值或参数发生变化时调用。

无论值或参数是否发生变化，每个变化检测周期都会调用不纯管道。

这与 Angular

未检测到的更改相关

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

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

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

Answer 2

除了之前的回答，我想补充一点：实例的数量。

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

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

如果管道是纯管道：将只有一个管道实例。转换方法将被调用两次，但在同一个实例上。
如果管道不纯：将有两个管道实例。

（您可以通过在管道的构造函数中生成一个随机 ID 并在两个方法中打印它来看到这一点：constructor 和 transform 方法）

由于纯管道（或通常的纯函数）确实（应该）没有任何副作用，因此可以毫无顾虑地重复使用相同的纯代码多次。似乎这就是纯管道仅实例化一次的原因。

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

Answer 3

Demo: difference b/w pure and impure pipe

在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>

Be careful while using impure pipe because this may over-use your system resources in case of inappropriate use.

Read in depth: Pure vs Impure Pipe

Answer 4

纯管道与不纯管道

纯管道是仅在“纯更改”到检测到输入值。
纯粹的改变是对原始输入（字符串、数字等）价值。或更改对象引用。
默认管道是纯管道。
所以不纯管道每次都会执行，无论源是否已更改。这会导致性能不佳。这就是为什么不推荐使用管道来过滤数据的原因。

要使管道不纯净：

@Pipe({
  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() 方法。
为不纯的管道创建了多个实例。
不纯的管道不是re-used。
我们不能在管道不纯的情况下使用缓存。
取决于一些内部状态。
在每个更改检测周期调用。
传递到此管道的输入可以是可变的。

不纯管道示例

一个。异步管道

b。 JsonPipe 和 SlicePipe

.ts 文件

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);
  }
}

.html 文件

<input type="text" [(ngModel)]="searchTerm"  placeholder="Enter name" >
<button (click)="changeProperty()">change by Property</button>
<button (click)="changeReference()">change by Reference</button>
<ul>
<li *ngFor="let user of users | filter:searchTerm">{{user.name}}  </li>
</ul>

Angular 中的不纯管道是什么？

What is an impure pipe in Angular?

angular2-pipe

angular-pipe

angular

Demo: difference b/w pure and impure pipe

如何使管道不纯或不纯？

如何使用？

“纯管道”：

“不纯管道”：