Angular Route で事前にデータを取得する方法について話しましょう

事前取得とは、画面に表示される前にデータを取得することを意味します。この記事では、ルーティングを変更する前にデータを取得する方法を説明します。この記事では、 resolverの使用方法、 Angular Appでのresolverの適用方法、およびそれらを共通のプリロードされたナビゲーションに適用する方法を学習します。 [関連チュートリアルの推奨:「angular チュートリアル」]

Resolverを使用する理由 リゾルバー

Resolverルーティングとコンポーネントの間のミドルウェア サービスの役割を果たします。データのないフォームがあり、ユーザーに空のフォームを表示し、ユーザー データのロード中にloaderを表示し、データが返されたときにフォームにデータを入力してloader非表示にするとします。

通常、コンポーネントのngOnInit()フック関数でデータを取得します。つまり、コンポーネントがロードされた後、データリクエストを開始します。

ngOnInit()で操作する場合、必要な各コンポーネントがロードされた後、ルーティング ページにloader表示を追加する必要があります。 Resolverと、 loaderの追加と使用を簡素化できます。すべてのルートにloader追加する代わりに、ルートごとに 1 つのloaderを追加するだけで済みます。

この記事では、例を使用して、 resolverの知識ポイントを分析します。それを覚えてプロジェクトで使用できるようにします。

アプリケーションでResolver使用する

アプリケーションでresolver使用するには、いくつかのインターフェイスを準備する必要があります。自分で開発しなくても、JSONPlaceholder を通じてシミュレートできます。

JSONPlaceholder 、インターフェイスに制約されることなく、フロントエンドの関連概念をより良く学習するために使用できる優れたインターフェイス リソースです。

インターフェイスの問題が解決されたので、 resolverアプリケーションを開始できます。 resolverはミドルウェアサービスなのでサービスを作成します。

$ ng gssolvers/demo-resolver --skipTests=true

--skipTests=true は、テスト ファイルの生成をスキップします

。サービスはsrc/app/resolversフォルダーに作成されます。 resolverインターフェイスには、 resolve()メソッドがあり、 route ( ActivatedRouteSnapshotのインスタンス) とstate ( RouterStateSnapshotのインスタンス) の 2 つのパラメーターがあります。

通常、 loaderすべてのAJAXリクエストをngOnInit()に書き込みますが、ロジックはngOnInit()の代わりにresolverに実装されます。

次に、 JSONPlaceholderにリストデータを取得するサービスを作成します。次に、 resolver内でそれを呼び出し、 resolverが処理されるまでルート内でresolve情報を構成します (ページは待機します)。 resolverが処理された後、ルーティングを通じてデータを取得し、コンポーネントに表示できます。

サービスを作成し、リスト データを取得するロジックを作成します

$ ng gs services/posts --skipTests=true

サービスが正常に作成されたので、次はAJAXリクエストのロジックを作成します。

modelを使用すると、エラーを減らすことができます。

$ ng g class models/post --skipTests=true

post.ts

エクスポート クラス Post { id: 番号;
  タイトル: 文字列;
  本体: 文字列;
  ユーザー ID: 文字列;
モデル

model準備ができたので、 postのデータを取得します。

post.service.ts

import { Injectable } from "@angular/core";
import { HttpClient } から "@angular/common/http";
import { Post } から "../models/post";

@Injectable({
  指定: "ルート"
})
エクスポート クラス PostsService {
  コンストラクター(private _http: HttpClient) {}

  getPostList() {
    URL = "https://jsonplaceholder.typicode.com/posts";
    return this._http.get<Post[]>(URL);
  }
これ

で、このサービスはいつでも呼び出すことができます。

demo-resolver.service.ts

import { Injectable } from "@angular/core";
輸入 {
  解決する、
  アクティブ化されたルートスナップショット、
  ルーター状態スナップショット
"@angular/router" から;
import { PostsService } から "../services/posts.service";

@Injectable({
  指定: "ルート"
})
エクスポート クラス DemoResolverService は Resolve<any> {を実装します。
  コンストラクター(private _postsService: PostsService) {}

  solve(ルート: ActivatedRouteSnapshot、状態: RouterStateSnapshot) {
    this._postsService.getPostList() を返します。
  }
リゾルバー

resolver返されたポストリストデータ。ここで、 resolverを構成し、ルートからデータを取得し、コンポーネントにデータを表示するためのルートが必要です。配線ジャンプを実行するには、コンポーネントを作成する必要があります。

$ ng gcComponents/post-list --skipTests=true

ルートを表示するには、 app.component.tsにrouter-outletを追加します。

<router-outlet></router-outlet>

これで、 app-routing.module.tsファイルを設定できるようになりました。次のコード スニペットは、ルート設定resolver理解するのに役立ちます。

app-routing-module.ts

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { PostListComponent } from "./components/post-list/post-list.component";
import { DemoResolverService } from "./resolvers/demo-resolver.service";

const ルート: ルート = [
  {
    パス: "投稿",
    コンポーネント: PostListComponent、
    解決する： {
      投稿: DemoResolverService
    }
  }、
  {
    パス： ""、
    リダイレクト先: "投稿",
    パスマッチ: "フル"
  }
];

@NgModule({
  インポート: [RouterModule.forRoot(ルート)]、
  エクスポート: [ルーターモジュール]
})
import class AppRoutingModule {}

ルーティング構成にresolveが追加されました。これにより、 HTTPリクエストが開始され、 HTTPリクエストが正常に返されたときにコンポーネントが初期化できるようになります。ルートは、 HTTPリクエストによって返されたデータを組み立てます。

リクエストが進行中であることをユーザーにAppComponent loader

方法は

必要に応じてカスタマイズできます。

app.component.html

<div class="loader" *ngIf="isLoader">
  <div>読み込み中...</div>
</div>
<router-outlet></router-outlet>

app.component.ts

import { Component } from "@angular/core";
輸入 {
  ルーター、
  ルーターイベント、
  ナビゲーション開始、
  ナビゲーション終了
"@angular/router" から;

@成分（{
  セレクター: "アプリルート",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
エクスポート クラス AppComponent {
  isLoader: ブール値;

  コンストラクター(private _router: ルーター) {}

  ngOnInit() {
    this.routerEvents();
  }

  routerEvents() {
    this._router.events.subscribe((イベント: RouterEvent) => {
      スイッチ (真) {
        NavigationStart のケース イベント インスタンス: {
          this.isLoader = true;
          壊す;
        }
        NavigationEnd のケース イベント インスタンス: {
          this.isLoader = false;
          壊す;
        }
      }
    });
  }

、

isLoader値にtrueが割り当てられ、ページに次の効果が表示されます。

resolver処理が完了すると、リゾルバは非表示になります。

次に、ルートから値を取得して表示します。

port-list.component.ts

import { Component, OnInit } from "@angular/core";
import { Router, ActivatedRoute } from "@angular/router";
import { Post } から "src/app/models/post";

@成分（{
  セレクター: "アプリポストリスト",
  templateUrl: "./post-list.component.html",
  styleUrls: ["./post-list.component.scss"]
})
エクスポート クラス PostListComponent は OnInit を実装します {
  投稿: 投稿[];

  コンストラクター(private _route: ActivatedRoute) {
    this.posts = [];
  }

  ngOnInit() {
    this.posts = this._route.snapshot.data["投稿"];
  }

よう

に、 postの値はActivatedRouteのスナップショット情報dataから取得されます。どちらの値もルートに同じ情報を設定すれば取得可能です。

HTMLでは次のようにレンダリングします。

<div class="post-list グリッドコンテナ">
  <div class="card" *ngFor="投稿を投稿する">
    <div class="title"><b>{{post?.title}}</b></div>
    <div class="body">{{post.body}}</div>
  </div>
</div>

CSSフラグメント スタイルを使用すると、見た目がさらに美しくなります。

ポートリスト.コンポーネント

.css .grid-container {
  表示: グリッド;
  グリッド テンプレート列: calc(100% / 3) calc(100% / 3) calc(100% / 3);
}
.card {
  マージン: 10px;
  ボックスシャドウ: 黒 0 0 2px 0px;
  パディング: 10px;

ルートからデータを取得した後、スタイルを記述するには scss プリプロセッサを使用することをお勧めします。データはHTMLで表示され

ます

。

効果は次のとおりです: スナップショット。

この時点で、プロジェクトでresolver使用する方法を学習しました。

まとめ

ユーザー エクスペリエンス デザインと組み合わせ、 resolverを利用すると、アプリケーションのパフォーマンスを向上させることができます。詳細については、公式 Web サイトをご覧ください。

この記事は、個人的な理解とコメントを追加した自由翻訳による翻訳です。元のアドレスは、https:

//www.pluralsight.com/guides/prefetching-data-for-an-angular-route

です。