@Pipe({name:'myPipe', pure: false})
Я не могу понять грязные трубы, некоторые из них лучше с чистыми трубами.
Пожалуйста, объясните мне простой и простой пример?
@Pipe({name:'myPipe', pure: false})
Я не могу понять грязные трубы, некоторые из них лучше с чистыми трубами.
Пожалуйста, объясните мне простой и простой пример?
Чистый канал вызывается только тогда, когда Angular обнаруживает изменение значения или параметров, переданных в канал. Нечистая труба вызывается для каждого цикла обнаружения изменений, независимо от того, изменяются ли значение или параметры.
Это относится к изменениям, которые не обнаружены Angular
В этих случаях вы, вероятно, все еще хотите, чтобы труба была выполнена.
Вы должны знать, что нечистые трубы склонны быть неэффективными. Например, когда массив передается в канал для фильтрации, сортировки,..., тогда эту работу можно выполнять каждый раз, когда запускается обнаружение изменений (что довольно часто, особенно при настройке ChangeDetectionStrategy
по умолчанию), хотя массив, возможно, даже не изменился, Ваш канал должен попытаться распознать это и, например, вернуть кэшированные результаты.
Помимо предыдущего ответа, я хочу добавить еще одно отличие: количество экземпляров.
Предположим, что в HTML-коде используется несколько раз подряд. Как:
<p> {{'Hello' | translate }}<p>
<p> {{'World' | translate }}<p>
(вы можете видеть это, создавая случайный идентификатор в конструкторе канала и печатайте его в обоих методах: constructor
и transform
)
Поскольку чистые трубы (или вообще чистые функции) имеют (должны) не иметь ЛЮБЫХ побочных эффектов, один и тот же чистый код можно повторно использовать сколько угодно раз, не беспокоясь. Похоже, поэтому чистые трубы создаются только один раз.
OBS: это действительно в моей среде angular 4.0.
В angular
pipe
может использоваться как pure
и impure
Что такое чистая или нечистая pipe?
Проще говоря,
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>
Будьте осторожны при использовании нечистого канала, поскольку это может привести к чрезмерному использованию системных ресурсов в случае нецелевого использования.
Чистые и нечистые трубы
Чистые каналы - это каналы, которые выполняются только при обнаружении "ЧИСТОГО ИЗМЕНЕНИЯ" для входного значения.
по умолчанию труба - это чистая труба.
Таким образом, нечистый канал запускается каждый раз, независимо от того, изменился источник или нет. что приводит к плохой производительности. вот почему не рекомендуется использовать каналы для фильтрации данных.
Чтобы сделать трубу нечистой:
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.