앵귤러 http 요청을 사용한 비동기 파이프의 이점

Question

많은 각도 튜토리얼에서는 자동 수신 거부 관찰을 위해 비동기 파이프를 사용하는 것이 좋습니다.
비동기 파이프 자동 구독 취소 관찰자에 사용됩니다, 그렇지 않으면 당신은 그들이 무슨 짓을 수동으로

취소해야합니다 :

그들이 주장 무엇이
그들은이 같은 REST API를 호출하는 각도 http를 사용을 async 파이프의 예입니다.

그러나 내 이해에서 각도 HTTP 자동 관찰 할 수 있습니다. 관측 대상이 비동기 파이프 없이도 자동 수신 거부되므로 비동기 파이프가 실제로 의도 된 목적을 달성하지 못했습니다.

이 사용 사례에서 비동기 파이프를 사용해야하는 다른 이유가 있습니까?

샘플 구현 : 당신이 당신의 템플릿에서 직접 관찰을 사용하는 경우

getUserList() { 
    return this.http.get(apiUrl); 
} 

this.getUserList().subscribe(user => { 
    this.userList = user; 
}); 

<div *ngFor="let user of userlist | async"> 
    {{ user?.name }} 
    {{ user?.email }} 
</div> 

Answer 1

비동기 파이프 자동 구독 취소 관찰자에 사용하거나, 다른 사람은 탈퇴 필요 수동으로

그들은 아마도 무슨 뜻인지 만약 당신이 observable을 클래스 property에 할당한다면 Y :

import { interval } from 'rxjs/observable/interval'; 
let original = interval(1000); 

class Comp { 
    o = original; 

다음 나중에 원래의 관측에 다른 관찰

constructor() { 
    setTimeout(() => { 
     this.o = interval(500); 
    }, 5000); 
} 

가입하여 그 특성을 업데이트 배치 될 것이다 - 비동기 파이프 효과적으로 original.unsubscribe()를 호출한다. 이것은 소스에서 볼 수있다 :

@Pipe({name: 'async', pure: false}) 
export class AsyncPipe implements OnDestroy, PipeTransform { 
    ... 

    transform(obj: Observable<any>|Promise<any>|null|undefined): any { 
    .... 

    if (obj !== this._obj) { 
     this._dispose(); <------------------------- 
     return this.transform(obj as any); 
    } 

그래서, 비동기 파이프는 사실도 비동기 파이프없이 여기 관찰 의지 자동 탈퇴로 의도 된 목적을 제공하지 않았다.

이 용도로 비동기 파이프를 사용해야하는 이유가 있습니까? ?

예, 그들은 서로 다른 목적으로 사용 - 자신에게 당신이 보여 접근에 필요한 몇 가지 코드 저장 :

getUserList() { 
    return this.http.get(apiUrl); 
} 

// this part can be eliminated if you use ` let user of getUserList() | async` 
this.getUserList().subscribe(user => { 
    this.userList = user; 
}); 

<div *ngFor="let user of userlist"> <---- no need to use `async` here since `userlist` contains values, not observable 
    {{ user?.name }} 
    {{ user?.email }} 
</div> 

을

Answer 2

는 당신은 비동기 파이프가 필요합니다. 따라서 비동기 파이프의 주요 포인트는 템플릿에서 관측 가능 항목을 사용하는 것이고 자동 수신 거부는 추가 이점으로 제공됩니다.

그러니

<div *ngFor="let user of userlist"> 
</div> 

또는

<div *ngFor="let user of getUserList() | async"> 
</div>