Чистые трубы в угловой

Question

Как новичок в Angular, я наткнулся на чистые каналы, которые

• a) Выполняется только при обнаружении чистого изменения входного значения.
• b) Чистыйизменение - это либо изменение примитивного входного значения
  (String, Number, Boolean), либо изменение ссылки на объект (Array, Date, Function, Object).
• 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

Я полагаю, что это происходит потому, что каждый раз, когда вы используете свой канал в HTML, он вызывает функцию преобразования.Канал не различается между атрибутами, которые вы передаете его функции, в соответствии с интерфейсом PipeTransform в репозитории Angular:

Angular вызывает метод transform сзначение привязки в качестве первого аргумента и любые параметры в качестве второго аргумента в форме списка.

Answer 2

Я думаю, что нашел правильное выражение !.

a), чтобы сделать совместное использование / кэширование работой. Я считаю, что должно быть только использование одной трубы выражения в компоненте.Функция преобразования чистой трубы не будет переоцениваться для немедленного одинакового входа .

Например.Когда вы вводите 12 и вводите, вызывается преобразование fn, и если вы сразу же вводите 12 снова, вызов преобразования fn пропускается.

Таким образом, в чистых каналах будет проверяться последний вход в выражении, переданный по конвейеру, и это критерии для правильного запуска обнаружения изменений по сравнению с непосредственными следующими входами.

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

Нет общего "кэша" между каналами.«Кэширование» применяется для каждого вызова в шаблоне