角形纯管道

Question

作为Angular的初学者，我遇到了纯净的管道

• a）仅在检测到输入值发生纯变化时执行。
• b）纯粹的更改就是对原始输入值的更改
  （字符串，数字，布尔值）或更改的对象引用（数组，日期， 函数，对象）。
• c）如果管道的输入是一个纯管道，则不执行该管道 对象，并且只有该对象的属性值会更改，但不会更改 参考。

我很清楚的对象引用部分，问题出在原始类型上。

关键事实在于使用纯管道进行优化

只有在收到与先前调用相比不同的参数时，Angular才会评估给定的纯管道调用。

我尝试了一个例子：

applypure.pipe.ts

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

@Pipe({
  name: 'applypure',
  pure: true 
})
export class ApplypurePipe implements PipeTransform {
  count = 0;
  constructor() {
    // To determine an instance is created
    console.log('pipe created:');
  }

    transform(value: number, exponent: number): number {
    //this.count++;
    console.log(value);
    return Math.pow(value, exponent);;
  }
}

app.component.ts

import { Component } from '@angular/core';    

@Component({
  selector: 'my-app',
  template: `
            {{12 | applypure : 2}}
            {{12 | applypure: 2 }}  
           `
})
export class AppComponent  {
  }     
}

结果如下所示：

相同的输入在此之后立即传递到纯管道，但其转换方法被调用了两次。它不应该跳过重新评估吗？请澄清。

Answer 1

管道之间没有共享的“缓存”。 “缓存”适用于模板中的每个调用

Answer 2

我认为我找到了正确的 表达式 ！。

a）使共享/缓存有效，我相信组件中表达式的 仅一个管道用法 。纯管道的转换函数不会为 立即相同的输入 重新评估。

例如。输入12并输入时，将调用转换fn，如果再次立即输入12，则将跳过对转换fn的调用。

因此，在Pure Pipes中，将检查到管道表达式的最后一个输入，这是与下一个立即输入相比运行有效更改检测的条件。 < / p>

app.component.html

    Type:
<input type="text" #box (keyup.enter)="addName(box.value); box.value=''" placeholder="Parameter"> 
  <div *ngIf="number2">
  {{number2 | applypure : 2}} 
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent  {
  number2: number;

  addName(num: number) {
    this.number2 = num;
    console.log("Log at component: "+ this.number2);
  }

}

第一次输入12之后

第二次输入12之后

Answer 3

我相信这是因为每次在HTML中使用管道时，都会调用transform函数。根据Angular存储库中的PipeTransform接口，管道在传递给函数的属性之间没有区别：

  

Angular用绑定的值调用transform方法    作为第一个参数，所有参数作为列表形式的第二个参数。