Angular에서 불순한 파이프는 무엇입니까?

Angular에서 불순한 파이프는 무엇입니까?

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

저는 불순한 파이프를 이해할 수 없습니다.

순수 파이프와 불순물 파이프의 차이점은 무엇입니까?

간단하고 기본적인 예를 들어 설명해 주시기 바랍니다.

순수 파이프는 Angular가 파이프에 전달된 값 또는 매개 변수의 변화를 감지하는 경우에만 호출됩니다.

값 또는 매개 변수의 변경 여부에 관계없이 모든 변경 감지 주기에 대해 불순물 파이프가 호출됩니다.

이는 각도에 의해 감지되지 않는 변경 사항과 관련이 있습니다.

• 내용이 변경된 배열 또는 개체를 전달할 때(그러나 여전히 동일한 인스턴스임)
• 파이프가 다른 값에 액세스하기 위해 서비스를 주입하면 Angular는 값이 변경되었는지 여부를 인식하지 못합니다.

이러한 경우에도 파이프를 실행하기를 원할 수 있습니다.

불순한 파이프는 비효율적이기 쉽다는 것을 알아야 합니다.를 들어 정렬하기 이될 수 가 많습니다). 변경 감지가 실행될 때마다 이 작업이 수행될 수 있습니다(특히 기본값을 사용하는 경우가 많습니다).ChangeDetectionStrategysetting) 이벤트는 어레이가 변경되지 않았을 수도 있습니다.파이프는 이를 인식하고 캐시된 결과를 반환해야 합니다.

이전 답변 외에, 저는 인스턴스의 수라는 또 다른 차이점을 추가하고 싶습니다.

HTML 코드에서 파이프가 여러 번 사용된다고 가정합니다.예:

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

• 파이프가 순수한 경우: 파이프 인스턴스가 하나만 있습니다.변환 메서드는 동일한 인스턴스에서 두 번 호출됩니다.
• 파이프가 불순한 경우: 파이프의 인스턴스가 두 개 있습니다.

파이프의 생성자에서 임의 ID를 생성하고 둘 다 인쇄하면 이를 확인할 수 있습니다.constructor그리고.transform방법)

순수 파이프(또는 일반적으로 순수한 기능)는 부작용이 없어야 하기 때문에 동일한 순수 코드를 걱정 없이 몇 번이나 재사용할 수 있습니다.이것이 순수한 파이프가 한 번만 인스턴스화되는 이유인 것 같습니다.

OBS: 이것은 제 각진 4.0 환경에서 유효합니다.

데모: 차이 b/w 순수 및 불순물 파이프

angular,apipe로 사용할 수 있습니다.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>

부적절한 사용 시 시스템 리소스가 과도하게 사용될 수 있으므로 불순한 파이프를 사용할 때 주의하십시오.

상세 읽기: 순수 파이프 대 불순물 파이프

순수 및 불순물 파이프

• 순수 파이프는 입력 값에 대한 "순수 변화"가 감지될 때만 실행되는 파이프입니다.

• 순수 변경은 기본 입력(문자열, 숫자 등) 값에 대한 변경입니다.개체 참조가 변경되었습니다.

• 기본적으로 파이프는 순수 파이프입니다.

• 따라서 불순한 파이프는 소스가 변경되었는지 여부에 관계없이 매번 실행됩니다.성능 저하로 이어집니다.따라서 데이터 필터링에 파이프를 사용하지 않는 것이 좋습니다.

파이프를 불순물로 만드는 방법

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

참고: 파이프가 순수하고 직원 데이터가 방법을 사용하여 변경된 경우changeData()배열에서 직원의 속성을 수정합니다. 변경 사항은 변환을 위해 파이프로 전달되지 않습니다.입력 값이 다음 값에 입력된 이후로 변환이 다시 발생하지 않습니다.EmpFilterPipe는 것은입니다.employees배열, 변경되지 않은 개체/참조(속성만 변경됨) 및 순수 파이프는 개체/참조 변경 사항만 인식합니다.

"순수 파이프":

1. 순수 파이프는 순수 함수를 사용합니다.각도가 파이프에 입력으로 전달된 값 또는 매개 변수의 변화를 감지하는 경우에만 호출됩니다.순수 파이프는 불순한 파이프에 비해 많은 이점이 있습니다.
2. 전달된 값 또는 매개 변수에 변경이 있는 경우에만 순수 파이프가 재평가됩니다.
3. 순수 파이프는 이전 값 또는 입력의 결과를 캐시합니다.따라서 순수 파이프는 입력이 변경되지 않으면 재평가하지 않고 캐시의 출력을 바인딩할 수 있습니다.
4. 순수 파이프의 단일 인스턴스가 모든 구성 요소에 사용됩니다.
5. 우리는 그것을 알려진 입력과 출력에 대해 테스트하면 됩니다.
6. 순수 파이프는 입력 값(문자열, 숫자, 부울) 또는 객체 참조(날짜, 배열, 객체)에서 순수 변경을 평가합니다.
7. 순수 파이프의 경우 입력이 가변적이어서는 안 됩니다.

"불순 파이프":

1. Angular의 모든 변경 감지 사이클에서 불순물 파이프가 호출됩니다.입력 또는 값의 변경에 관계없이 모든 다이제스트 주기에서 호출됩니다.모든 변경 감지 시 호출할 파이프가 필요한 경우 파이프를 불순물로 표시합니다.불순물 파이프의 경우 Angular는 모든 변경 사이클에서 transform() 메서드를 호출합니다.
2. 불순물 파이프에 대해 여러 인스턴스가 생성됩니다.
3. 불순한 파이프는 재사용되지 않습니다.
4. 우리는 불순한 파이프의 경우 캐시를 사용할 수 없습니다.
5. 내부 상태에 따라 다릅니다.
6. 모든 변경 탐지 주기에서 호출됩니다.
7. 이 파이프에 전달된 입력은 가변적일 수 있습니다.

불순물 파이프의 예

비동기 파이프

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

.vmdk 파일

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

언급URL : https://stackoverflow.com/questions/39285550/what-is-an-impure-pipe-in-angular