Angularルーター。 ルート リゾルバ
API からのデータの取得と表示を扱う方法の 1 つは、ユーザーをコンポーネントにルートし、そのコンポーネントの ngOnInit フックでサービス内のメソッドを呼び出し、必要なデータを取得することです。 データを取得している間、コンポーネントはローディングインジケータを表示することができるだろう。 しかし、ルート リゾルバとして知られているものを使用して、新しいルートに移動する前にデータを取得することができる別の方法があります。
シンプルなリゾルバ
この投稿では、HNPWA プロジェクトから利用できる Hacker News API からデータを取得してから、集めたデータを表示するルートに移動する、シンプルなルート リゾルバを実装します。 まずは、2秒間の遅延の後に文字列を返すだけの最も単純なリゾルバを実装してみます。
HN.resolver.ts
見てのとおり、Angular ルーターの Resolve インターフェイスを実装する唯一の要件は、このクラスに resolve メソッドがあることです。
ここでは、2 秒の遅延後に文字列をラップした observable を返します。
ルート設定
ここで、ルーティング モジュールにリゾルバを含めるように設定できます。
リゾルバがサービスのように提供されていて、ルート定義でリゾルバを含める方法に注目してください。
Accessing Resolved Data in the Component
コンポーネントでは、ActivatedRoute の snapshot オブジェクトの data プロパティを使用して、解決されたデータにアクセスできます：
そしてこれが必要なすべてです。
<p>the message: {{ data.message }}</p>ルートに移動するとき、データが最初に解決されるため、2 秒の遅延があることに気づくでしょう。
Resolving Data from an API
ここで、実際に API からいくつかのデータを取得することにより、より現実的なものにしましょう。 ここでは、Hacker News API からデータを取得するサービスを作成します。
以下は、新しい HttpClient:
Access to Route Params
ActivatedRouteSnapshot オブジェクトを使用すると、リゾルバの現在のルート パラメータにアクセスすることができます。
ルートは次のようになります:
{ path: 'post/:id', component: PostComponent, resolve: { hnData: HnResolver }}そして、ここに私たちのサービスのgetPostメソッドがあります:
getPost(postId: string) { const endpoint = 'https://hnpwa.com/api/v0/item'; return this.http.get(`${endpoint}/${postId}.json`);}ここでユーザーが例えばhttp://localhost:4200/post/15392112に行くと、ポストID 15392112のデータが解決されることになります。
エラー処理
データの取得中にエラーが発生した場合、RxJSのcatch演算子を使用してリゾルバでエラーをキャッチし処理することができます。 たとえば、次のようなものです。
または、空の observable を返すこともできます。
Leave a Reply