サッカー場のコーナー

リゾルバとは何ですか?

ルートが実際にアクティブ化される前に、特定のデータがAPIレスポンスからロードされるようにするために、ルートリゾルバを使用します。

つまり、コンポーネントがロードされる前に、特定のルートのデータをプリフェッチします。

なぜリゾルバを使用するのですか?

Angularアプリケーションでは、コンポーネント内でいくつかの要素が自発的に表示されますが、Observableが正常にサブスクライブされた後に他のコンポーネントがロードされ、UI上でレンダリングするのに時間がかかる場合があると仮定します。 ここでは、リゾルバが救助に来ます。 コンポーネントがロードされる前に、アプリケーションがAPIレスポンスから最初にデータを取得することができ、ルートナビゲーションが可能になります。

リゾルバの実装を始めましょう。あなたも好きかもしれません:Angular ObservablesとPromises–それらの使用方法。

リゾルバーサービスの作成

  • @angular/routerからResolveインターフェイスをインポートします。
  • Resolve()ActivatedRouteSnapshotRouterStateSnapshot以下のように:

Resolve()インターフェイス

Resolve()インターフェイスResolve()インターフェイスResolve()インターフェイスResolve()インターフェイス

resolve()インターフェイス
  • Resolve()メソッドは、オブザーバブルを解決します:

従業員。リゾルバーts

従業員。リゾルバーts

ルートにリゾルバを追加する

リゾルバ、employeeを追加しています。解決します。ルート内のts、およびリゾルバに追加されたresolveメソッドは、解決されたデータをempDataという名前のキーに返します。/p>

アプリ。モジュール。ts

アプリ。モジュール。ts

EmployeeDetailsComponentで解決されたデータにアクセスする

解決されたデータには、ActivatedRouteのsnapshotオブジェクトを使用してルートで定義されたキーを使用してアクセスできます。p>

従業員の詳細。コンポーネント。ts

従業員の詳細。コンポーネント。ts

HTMLで解決されたデータを表示する

従業員の詳細。コンポーネント。html

従業員の詳細。コンポーネント。html

そして、それはリゾルバがどのように動作するかです—ルータが動作を開始し、コンポーネントがロードされる前に、あなたのデータを利用可能にします!

幸せな読書!

さらに読む

  • 角度8:あなたが知る必要があるすべて。
  • Angular8とWeb APIを使用したフルスタックアプリ:パート1。
  • Angular8を使用してFacebookとGoogleでログインします。

コメントを残す

メールアドレスが公開されることはありません。