각도 비동기 파이프

Angular 비동기 파이프는 구성 요소의 html에서 관찰 가능한 값을 표시하는 데 사용됩니다. 가장 큰 장점은 Angular가 observable에 대한 구독 및 구독 취소를 처리하고 사용하지 않는 구독이 없다는 것입니다.

비동기 파이프 없이

따옴표를 표시하는 구성 요소를 만들고 있다고 상상해보십시오.

export class QuotesComponent implements OnInit {
  quotes: string[] = [];

  ngOnInit(): void {
    of([
      'Amor fati',
      'Memento mori',
      'Summum Bonum'
    ]).subscribe((values) => {
      this.quotes = values;
    });
  }
}

<div *ngFor="let quote of quotes">
{{quote}}
</div>

이제 구독 취소를 처리하려면 onDestroy 메서드를 구현하고 observable$을 클래스 수준 변수로 만들고 구성 요소의 onDestroy 구독을 취소해야 합니다. 비동기 파이프가 들어오는 곳입니다.

비동기 파이프 사용

export class QuotesComponent {
  quotes$: string[] = of([
      'Amor fati',
      'Memento mori',
      'Summum Bonum'
    ]);
}

여기서는 | async를 사용하여 구독을 처리합니다.

<div *ngFor="let quote of quotes$ | async">
{{quote}}
</div>

구독을 수동으로 처리할 필요가 없다는 이점 외에도 코드를 상당히 정리합니다.