Angular Resolversを使用したページロード時のスムーズなUX

開発者として、あなたは常にあなたのコードを最適化しようとしています。 これには、データベースからのデータに依存することが多い、完全にロードされたUIをユーザーに提示する速度が含まれます。

必然的に、ユーザーがページジャンクと呼ばれるものに遭遇することなく、アプリケーションの新しいページ/領域に移動するとすぐにデータを解決する方法p>

これは、特定のコンポーネントをロードしている間にページが上下に移動しているときです。 それはUXに大きな影響を与え、”バグ”に見えるところまで影響を与える可能性があります。

Angularは、ルートがロードされる前にデータを事前にフェッチする直感的なアプローチを提供します。これはAngular Resolverと呼ばれています。

Angular Resolverは本質的にAngularサービスです。 ルート設定でルーティングモジュールに提供する注入可能なクラス。 この特別なタイプのサービスは、含まれるルートがナビゲートされるときに注入され、実行されます。リゾルバは、ActivatedRouteサービスを介して利用できるようになるページのロード前にデータを解決します。 これにより、最初のページの読み込みに重要なコンポーネントが必要になる前に、ユーザーができるだけ迅速にデータを保持できるように、簡単で効率的な方法が提供されます。

角度リゾルバを使用する別の方法は、SEOメタデータを即座に設定する方法として使用することです。リゾルバを使用すると、ページがロードされる前にデータが存在することを保証し、すべてが初期化に必要なものを持っていることを保証します。

角度リゾルバを分解してみましょう

角度リゾルバは、ResolveResolveresolveというクラス内に関数を実装する必要があります。

ここでは、解決されたインターフェイスの署名です…

export interface Resolve<T> {
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<T> | Promise<T> | T {
return 'data';
}
}

インターフェイスの署名からわかるように、一般的な引数が必要ですTこれは解決されたデータのタイプになります。resolve関数は、ObservablePromiseTのデータだけを返します。 したがって、特にデータベースからデータを取得する場合は、これを非同期で処理する必要があるという提案があります。

解決関数の主な目的は、完了する必要があることです。 この事実は、observablesでデータを取得するときに記憶する必要があります。 Observableは完了しなければなりません。 結局のところ、それはリゾルバです。

observableが完了しない場合、データは解決されず、ページはロードされません。 したがって、データベースから必要なものがすべて揃っているので、これ以上値を取る必要がなく、データを解決できるポイントを定義する必要がありま Observablesなどの非同期データストリームを使用する場合、これはrxjsからのパイプ可能な演算子のユースケースです。

条件に基づいてデータストリームを完了することを考えるときに気になるパイプ可能な演算子は、filtertakefirstnullundefinedtaketaketaketaketaketaketake。nullまたはリダイレクトを返す問題やエラーが発生したときにobservableを早期に完了するために必要な演算子は、catchErrortimeouttimeoutcatchErrornullを返してコンポーネント内で再試行できるようにするか、リダイレ

あなたのデータがすぐに解決しない場合は、複雑なフィルタリング、ロジック、データベース呼び出しの膨大な量に基づいている、あな

データベース呼び出しの最小量と、ページを正常かつ正常にロードするために必要な最小データを決定することをお勧めします。

その結果、リゾルバを実装する前に、ページの初期化時にロードできるデータから”折り畳みの上”コンテンツを分離することに集中するために時間を費

したがって、スムーズなUXに必要なデータを、リゾルバではなくコンポーネントから呼び出すことができる残りのデータから分割することができます。

リゾルバを介して、折り畳みの上にある最小限のコンテンツを排他的に処理できます。

ページの読み込みにこの動的なアプローチは、スケルトンの使用を支援することができます。 ユーザーが即座にスクロールダウンすると、コンテンツがロードされていることをユーザーに示すことができ、その後UXが改善されます。P>

ステップ1: リゾルバの作成

角度リゾルバを作成する必要があります。 ただし、リゾルバを生成するAngular CLIコマンドはありません。 したがって、デコレータ（リゾルバのメタデータ）を自分で記述する必要があります。

幸いなことに、リゾルバの定型文を形成するのは数行のコードだけであり、覚えておくのに苦労している場合は、既存のサービスからinjectableデコレータを取

注入デコレータでプロファイルリゾルバクラスに注釈を付ける

まず、注入デコレータにprovidedIn: anyを設定します。

@Injectable({ providedIn: 'any'})

リゾルバには、ResolverProfileResolverと呼びます。これはリゾルバであり、Angularはリゾルバの機能を認識するため、resolve関数で実装する必要がある署名を提供するResolveクラスを実

@Injectable({providedIn: 'any'})
export class ProfileResolver implements Resolve<Profile> {
}

resolve関数は、Profileインターフェイスに準拠したデータを持つObservableを返します。 したがって、リゾルバクラスの汎用引数としてProfileresolve()関数を提供します。 このようにして、リゾルバの角度要件に準拠しました。resolveの実装では、必要に応じてroutestateresolve()関数内からアクセスできます。

次に、実際にデータベースから実際のデータを解決する必要があります。

データベースからデータを取得する

resolve関数のデータを取得するには、データを提供するサービス、データベースと対話するサービスを挿入する必要があり

私たちは、ユーザーが迅速かつ正常にナビゲートするように、迅速に解決するために必要なものを取ります。 このデモの目的のために、データベースを扱う基礎となるサービスについては心配しません。 ProfileResolverクラスのコンストラクタ引数で依存性注入を使用してサービスを注入するだけです。

データは複数の値が非同期に出力される観測可能なデータストリームの形式で提供されるため、パイプ可能な演算子takerxjs/operatorからインポートするだけです。 それ以外の場合、observableは決して完了せず、リゾルバは決して解決しません。

私たちはただ一つの放出/値を必要とし、take私たちのために観測可能なものを完成させます。resolverを作成するのと同じくらい簡単です。angularがサブスクリプションを処理するresolve()関数でobservableを返すだけです。P>

親ルートにリダイレクトしてデータを取得する際のエラーを処理します。

ボーナス: ルートがロードされる前に動的SEOメタデータをすばやく入力する

<meta>タグを入力する利点は、即座に明らかな利点があります。 より速く私たちのSEOのメタデータが移入され、より速く私たちのSEOが正しく、正確にページのコンテンツを反映しています。

これは、GoogleやBingなどの検索エンジンが運営するロボットなどのロボットがサイトをクロールしてコンテンツを取得する方が簡単で迅速であるこ

これは、ロボットがコンテンツを受け取る前にすべてのレンダリングが完了するため、事前にレンダリングされたページやAngular Universal

しかし、GOOGLE robotsがSEOのjavascriptを解析する能力に頼っている場合、またはレンダリングされたDOMを返す前にSEOが正しいという保証を必要とするpuppeteerのようなオンデマンドソリューションを持っている場合は、SEOを含むリゾルバーが役立つはずです。 だから、クローラーが時間制限されているときに役立ちます。

コンポーネントから懸念を分離するため、コンポーネントはSEO関連のものを処理する必要はありません。 私がリゾルバが好きな主な理由の一つ。

ステップ2:リゾルバをルーティングモジュールに挿入します

リゾルバを提供するProfileRoutingModuleは遅延ロードされたモジュールです。 したがって、ルートパスはパラメータtokenuserSlugで空になり、正しいプロファイルデータを取得する必要があります。

リゾルバを提供するには、データの名前をキーとして、特定のリゾルバをそのデータの解決を担当する値としてオブジェクトを提供するだけです。キーには好きな名前を付けることができますが、dataと呼ぶだけです。

それは私たちのリゾルバを使用するためにルーティングモジュールに必要なすべてです。

次に、コンポーネント内のデータを取得して使用する必要があります。ステップ3

ステップ3

ステップ3: 解決されたデータを使用してコンポーネントを初期化します

ルートのアクティブ化に関するデータを解決したので、データはActivatedRouteサービスを介してアクセ Observablesを扱っているので、アプリケーション全体で、解決されたデータになるdataプロパティにバインドするstreamを作成します。まず、ActivatedRouteProfileComponentthis.route.dataprofile$observableに割り当てます。 また、更新されたデータがデータベースから到着したときにobservableを使用するように切り替えて、アプリと対話しているときに新しいデータが得られるようにしこのためには、startWiththis.route.snapshot.datathis.route.snapshot.datadatastartWithは、ストリームの最初の出力として開始する値を示します。

すぐにアクセス可能なデータは、コンポーネントのために何をすべきか

すぐにア このようなリゾルバを使用しない結果、ページが断片化された方法でロードされているように見えることがあり、視覚的には喜ばれません。その結果、HTMLテンプレートのどの要素がどのデータに依存しているかに注意する必要があります。 次に、これらの要素とページの読み込みUXに対する全体的な効果をサポートするリゾルバを記述する必要があります。htmlテンプレートの複数の部分にngIfがある場合、コンポーネントが断片化された

• をロードする方法は複数あります。別のものはngForです。

ブラウザのサイズ変更の量を制限する目的で、個々のngIfの量を制限することをお勧めします。

データを取得する前にページをロードすると、ページの一部が常にジャンプ、遅れ、サイズ変更され、UXが苦しむ原因となる可能性があります。

リゾルバを実装することは、ユーザーが3-5秒のジャンプとサイズ変更を経験するのと0.5秒の違いである可能性があり、これは多くの場合、全体的なUXにダメージを与えるには速すぎることが多い。

これで終わりです！ 私たちは、ページの読み込み時に改善されたUXとリゾルバを持っています。