각도 템플릿에 가입 된 관찰 가능 항목에 대한 예외를 잡는 방법?

Question

Angular (4.3.6) 응용 프로그램에서 나는 비동기 파이프가있는 temnplate에서 관측 가능 항목을 지정합니다.

HTTP GET에서 404를 얻을 때 예외가 발생하여 Angular로 인해 응용 프로그램이 응답하지 않게되는 경우가 있습니다. 내 서비스에서 .catch() 메서드를 사용할 수 있지만 직접 내 구성 요소에 .subscribe() 메서드가없는 것을 보았습니다. 어떻게 예외를 처리 할 수 ​​있습니까?

documentService :

public getDocument() { 
    return this.getDocument(serverUrl).catch((err) => this.handleError(err)); 
} 

private handleError(error: Response) { 
    return Observable.throw(error); 
} 

구성 요소 :

public ngOnInit() { 

    const document$ = this.reference$ 
     .filter((i) => !!i) 
     .combineLatest(this.documentService.getBranch(), 
     (r: any, branch: string) => { 
      return this.documentService.getDocument(r.Id, r.targetId, this.GetHeadBranch(branch)); 
     }).switch(); 
    } 

템플릿는 :

<div *ngIf="document$|async; let document;"> 
    .... 
</div> 

은 t인가 내 사례처럼 관측 대상을 예외로 잡는 것이 가장 좋은 방법인가요?

Answer 1

지금까지 볼 수있는 것처럼 from the async source code은 오류가 발생했을 때 파이프에게 수행 할 작업을 지시 할 수있는 방법이 없습니다. 파이프가 오류를 throw합니다. 그래서 두 가지 선택이있는 것 같습니다 :

추가 매개 변수를 취하는 파이프를 만들 수 있습니다. 아마도 오류가 발생할 때 실행할 콜백 함수 일 수 있습니다. 콜백은 발생 된 오류와 함께 관찰 가능한 소스를 전달할 수 있으므로 적절한 오류 메시지를 표시하고 원하는 경우 다시 구독 할 수도 있습니다.

catch을 사용할 수 있으며 반환 된 정보의 형식을 지정하여보기에 적합하도록 서비스의 오류를 처리 할 수 ​​있습니다.

private handleError(error: Response) { 
    // return Observable.throw(error); //will crash the app when fed to async pipe 
    return Observable.of(this.errorDocument); //something the async pipe can display 
} 

아직 예외 처리하기위한 더 나은 방법이 아니라고

See my example