Resolveサービスでエラーを処理する

Question

ValuesComponentは、Valueの配列をHTMLテーブルに表示しているとします。優秀なプログラマーとすべてのビーイング

// in value.ts 
export class Value { ... } 

// in values.component.ts 
@Component(...) 
export class ValuesComponent { ... } 

、私は値を提供する責任がある別のクラスを作成しました。 ValuesServiceとしましょう。

// in values.service.ts 
@Injectable() 
export class ValuesService 
{ 
    public getValues(): Observable<Value[]> 
    { 
     ... 
    } 
} 

サービスは、Webサービスから値を取得しているとします。私のコンポーネントに直接サービスを注入するのではなく、今 /api/values

、私は角度ルータがに移動する前に値をプリフェッチようにしたいですコンポーネント

私はResolveサービスクラスを作成し、ルータモジュールに接続しました。

// in values-resolver.service.ts 
export class ValuesResolverService implements Resolve<Value[]> { 
    constructor(private backend: ValuesService) { 
    } 

    public resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Value[]> { 
     return this.backend.getValues(); 
    } 
} 

// In app.module.ts (in @NgModule()) 
imports: [ 
    RouterModule.forRoot([{ 
    path: 'values', 
    component: ValuesComponent, 
    resolve: { values: ValuesResolverService } 
    }]) 
] 

どのように私はこれまでやっていますか？良い？次に、ValuesService.getValues()が失敗したときのエラー処理をどこに置くのですか？ （接続エラー、内部サーバーエラー、...）

ユーザーが/#/valuesルートに移動しようとしたときにエラーが発生すると、エラーをコンソールに記録してナビゲーションを停止します。理想的には、ユーザーを/#/errorルートにリダイレクトしたいと思います（サンプルコードには示されていません）。

Answer 1

このような状況では、サービスはエラーを処理し、必要なルートにリダイレクトする必要があります。 catchメソッドは、解決中に空のケースを処理しながら、空のObservable（解決ガードが解決するため）を返します。この

export class ValuesService { 
    constructor(private http:Http, private router:Router) {} 

    getValue() { 
     this.http.get('/some/url').map((response:Response) => { 
      // Map your response to a model here 
     }).catch((response:Response) => { 
      // Handler case for different status 
      this.router.navigate(['/error']); 
      return Observable.empty(); 
     }) 
    } 
} 

そして次

また

export class ValueResolveGuard implements Resolve<Value[]> { 

    constructor(private valueService:ValueService) {} 

    resolve() { // You don't need the route & state if you're not gonna use them 
     this.valueService.getValue().toPromise().then((values:Values[]) => { 
      if (!values) { // For the Observable.empty() case 
       // return some default stuff 
      } 
      return values; 
     }) 
    } 
} 

ようになり、ガードのような

何かが、あなたは、具体的に観察を返すようにしたい場合（この場合の違いを作るべきではありません、解決ガードは観察可能なものと約束を受け入れるので）、このようなことをすることができます。最初の（）が必要です

this.valueService.getValue().first().catch({} => { 
     // return some default value. 
}); 

お知らせ、返された観測可能で、観察可能な終端になるようにそう決意ガードが解決されないでしょう。空のobservableのfirst（）呼び出しがエラーを投げるため、キャッチが必要です。