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

Angular Route で事前にデータを取得するにはどうすればよいですか?以下の記事ではAngular Routeから事前にデータを取得する方法を紹介していますので、ご参考になれば幸いです。

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

Resolver を使用する理由

#Resolver

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

ngOnInit()

フック関数でデータを取得します。つまり、コンポーネントがロードされた後、データリクエストを開始します。 ngOnInit() の操作では、必要な各コンポーネントがロードされた後、ルーティング ページに

loader

表示を追加する必要があります。 Resolver を使用すると、loader の追加と使用を簡素化できます。すべてのルートに loader を追加する代わりに、各ルートに適用する loader を 1 つ追加するだけです。 この記事では、例を使用して resolver のナレッジ ポイントを分析します。それを覚えてプロジェクトで使用できるようにします。

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

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

JSONPlaceholder

を通じてシミュレートできます。 JSONPlaceholder は優れたインターフェイス リソースであり、これを使用すると、インターフェイスに制約されることなく、フロントエンドの関連概念をよりよく学習できます。

インターフェースの問題が解決されたので、resolver のアプリケーションを開始できます。

resolver

はミドルウェア サービスなので、サービスを作成します。 <pre class="brush:js;toolbar:false;">$ ng g s resolvers/demo-resolver --skipTests=true</pre>--skipTests=true テスト ファイルの生成をスキップする サービスは

src/app/resolvers

フォルダーに作成されます。

resolver

インターフェイスには resolve() メソッドがあり、次の 2 つのパラメータがあります: route (ActivatedRouteSnapshot のインスタンス) と state (RouterStateSnapshot のインスタンス)。 loader 通常、すべての

AJAX

リクエストは ngOnInit() に記述されますが、ロジックは resolver に実装されます。 ngOnInit() を置き換えます。 次に、JSONPlaceholderにリストデータを取得するサービスを作成します。次に、

resolver

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

$ ng g s services/posts --skipTests=true

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

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

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

post.ts

export class Post {  id: number;
  title: string;
  body: string;
  userId: string;
}

model 準備が整いました。投稿 post

のデータを取得します。

post.service.ts

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

@Injectable({
  providedIn: "root"
})
export class PostsService {
  constructor(private _http: HttpClient) {}

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

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

demo-resolver.service.ts

import { Injectable } from "@angular/core";
import {
  Resolve,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
} from "@angular/router";
import { PostsService } from "../services/posts.service";

@Injectable({
  providedIn: "root"
})
export class DemoResolverService implements Resolve<any> {
  constructor(private _postsService: PostsService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this._postsService.getPostList();
  }
}

resolver から返されたリスト データを投稿します。ここで、resolver

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

$ ng g c components/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 routes: Routes = [
  {
    path: "posts",
    component: PostListComponent,
    resolve: {
      posts: DemoResolverService
    }
  },
  {
    path: "",
    redirectTo: "posts",
    pathMatch: "full"
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

ルーティング構成に

resolve が追加されました。これにより、HTTP が開始されます。

リクエストを実行し、

HTTP リクエストが正常に返されたときにコンポーネントが初期化されるようにします。ルートは、HTTP リクエストによって返されたデータを組み立てます。 プリロードされたナビゲーションを適用する方法

リクエストが進行中であることをユーザーに示すために、

AppComponent## に一般的でシンプルな ## を記述します。 # #ローダー。必要に応じてカスタマイズできます。

app.component.html

  
Loading...

<router-outlet></router-outlet>

app.component.ts

import { Component } from "@angular/core";
import {
  Router,
  RouterEvent,
  NavigationStart,
  NavigationEnd
} from "@angular/router";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  isLoader: boolean;

  constructor(private _router: Router) {}

  ngOnInit() {
    this.routerEvents();
  }

  routerEvents() {
    this._router.events.subscribe((event: RouterEvent) => {
      switch (true) {
        case event instanceof NavigationStart: {
          this.isLoader = true;
          break;
        }
        case event instanceof NavigationEnd: {
          this.isLoader = false;
          break;
        }
      }
    });
  }
}

当导航开始，isLoader 值被赋予 true，页面中，你将看到下面的效果。

当 resolver 处理完之后，它将会被隐藏。

现在，是时候从路由中获取值并将其展示出来。

port-list.component.ts

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

@Component({
  selector: "app-post-list",
  templateUrl: "./post-list.component.html",
  styleUrls: ["./post-list.component.scss"]
})
export class PostListComponent implements OnInit {
  posts: Post[];

  constructor(private _route: ActivatedRoute) {
    this.posts = [];
  }

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

如上所示，post 的值来自 ActivatedRoute 的快照信息 data。这值都可以获取，只要你在路由中配置了相同的信息。

我们在 HTML 进行如下渲染。

<div class="post-list grid-container">
  <div class="card" *ngFor="let post of posts">
    <div class="title"><b>{{post?.title}}</b></div>
    <div class="body">{{post.body}}</div>
  </div>
</div>

CSS 片段样式让其看起来更美观。

port-list.component.css

.grid-container {
  display: grid;
  grid-template-columns: calc(100% / 3) calc(100% / 3) calc(100% / 3);
}
.card {
  margin: 10px;
  box-shadow: black 0 0 2px 0px;
  padding: 10px;
}

推荐使用 scss 预处理器编写样式

从路由中获取数据之后，它会被展示在 HTML 中。效果如下快照。

至此，你已经了解完怎么应用 resolver 在你的项目中了。

总结

结合用户体验设计，在 resolver 的加持下，你可以提升你应用的表现。了解更多，你可以戳官网。

本文是译文，采用的是意译的方式，其中加上个人的理解和注释，原文地址是：

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

更多编程相关知识，请访问：编程视频！！

以上がAngular Route で事前にデータを取得する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。