Parlons de la façon d'obtenir des données à l'avance dans Angular Route

Comment obtenir des données à l'avance dans Angular Route ? L'article suivant vous expliquera comment obtenir des données à l'avance à partir d'Angular Route. J'espère qu'il vous sera utile !

Prendre de l'avance signifie obtenir les données avant qu'elles ne soient présentées à l'écran. Dans cet article, vous apprendrez comment obtenir des données avant les modifications de routage. Grâce à cet article, vous apprendrez à utiliser le resolver, à appliquer le resolver dans Angular App et à l'appliquer à une navigation préchargée commune. [Tutoriels associés recommandés : "tutoriel angulaire"]resolver， 在 Angular App 中应用 resolver，应用到一个公共的预加载导航。【相关教程推荐：《angular教程》】

你为什么应该使用 Resolver

Resolver 在路由跟组件之间扮演着中间件服务的角色。假设你有一个表单，没有数据时，你想向用户一个空的表单，当在加载用户数据时展示一个 loader，然后当数据返回时，填充表单并隐藏 loader。

通常，我们都会在组件的 ngOnInit() 钩子函数中获取数据。也就是说，组件加载完之后，我们发起数据请求。

在 ngOnInit() 中操作，我们需要在每个需要的组件加载后，在其路由页面中添加 loader 展示。Resolver 可以简化 loader 的添加使用。你可以只添加一个适用于每个路由的 loader，而不是每个路由中都添加 loader。

本文将结合示例来解析 resolver 的知识点。以便于你可以牢记它并在项目中使用它。

在应用中使用 Resolver

为了在应用中使用 resolver，你需要准备一些接口。你可以通过 JSONPlaceholder 来模拟，而不需要自己开发。

JSONPlaceholder 是一个很棒的接口资源，你可以借助它更好学习前端的相关概念而不被接口所约束。

现在，接口的问题解决了，我们可以开始 resolver 的应用了。一个 resolver 就是一个中间件服务，所以我们将创建一个服务。

$ ng g s resolvers/demo-resolver --skipTests=true

--skipTests=true 跳过生成测试文件

src/app/resolvers 文件夹中创建了一个服务。resolver 接口中有一个 resolve() 方法，它有两个参数：route（ActivatedRouteSnapshot 的实例）和 state(RouterStateSnapshot 的实例)。

loader 通常是在 ngOnInit() 中编写所有的 AJAX 请求，但是逻辑将会在 resolver 中实现，替代 ngOnInit()。

接着，创建一个服务来获取 JSONPlaceholder 中列表数据。然后在 resolver 中底调用，接着在路由中配置 resolve信息，（页面将会等待）直到 resolver 被处理。在 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 中编写一个公共且简单的 loader

Pourquoi utiliser Resolver🎜

🎜Resolver joue le rôle d'un service middleware entre le routage et les composants. Supposons que vous ayez un formulaire sans données et que vous souhaitiez présenter un formulaire vide à l'utilisateur, afficher un loader lorsque les données utilisateur sont chargées, puis lorsque les données sont renvoyées, remplir le formulaire et masquer le chargeur . 🎜🎜Habituellement, nous obtiendrons les données dans la fonction hook ngOnInit() du composant. En d'autres termes, une fois le composant chargé, nous lançons une demande de données. 🎜🎜Opération dans ngOnInit(), nous devons ajouter l'affichage loader dans sa page de routage après le chargement de chaque composant requis. Resolver peut simplifier l'ajout et l'utilisation de loader. Au lieu d'ajouter un loader à chaque itinéraire, vous pouvez simplement ajouter un loader qui s'applique à chaque itinéraire. 🎜🎜Cet article utilisera des exemples pour analyser les points de connaissance du resolver. Pour que vous puissiez vous en souvenir et l'utiliser dans vos projets. 🎜

🎜Utilisation du Resolver dans votre application🎜

🎜Pour utiliser le resolver dans votre application, vous avez besoin pour préparer une interface. Vous pouvez le simuler via JSONPlaceholder sans le développer vous-même. 🎜🎜JSONPlaceholder est une excellente ressource d'interface. Vous pouvez l'utiliser pour mieux apprendre les concepts associés du front-end sans être contraint par l'interface. 🎜🎜Maintenant que le problème d'interface est résolu, nous pouvons démarrer l'application du resolver. Un résolveur est un service middleware, nous allons donc en créer un. 🎜

  
Loading...

<router-outlet></router-outlet>

🎜--skipTests=true Ignorer la génération des fichiers de test 🎜

🎜 Un service est créé dans le dossier src/app/resolvers. Il existe une méthode resolve() dans l'interface resolver, qui a deux paramètres : route (une instance de ActivatedRouteSnapshot</code >) et <code>state (une instance de RouterStateSnapshot). 🎜🎜loader écrit généralement toutes les requêtes AJAX dans ngOnInit(), mais la logique sera dans resolver Implémenté dans , en remplaçant ngOnInit(). 🎜🎜Ensuite, créez un service pour obtenir les données de la liste dans JSONPlaceholder. Appelez-le ensuite dans resolver, puis configurez les informations resolve dans la route (la page attendra) jusqu'à ce que resolver soit traité. Une fois le résolveur traité, nous pouvons obtenir les données via le routage et les afficher dans le composant. 🎜

🎜Créez le service et écrivez la logique pour obtenir les données de la liste🎜

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;
        }
      }
    });
  }
}

🎜Maintenant que nous avons créé le service avec succès, il est temps d'écrire un Logique de requête AJAX. 🎜🎜L'utilisation du model peut nous aider à réduire les erreurs. 🎜

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.ts🎜🎜

<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>

🎜model est prêt, il est temps d'obtenir les données pour la publication post. 🎜🎜🎜post.service.ts🎜🎜

.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;
}

🎜Désormais, ce service peut être appelé à tout moment. 🎜🎜🎜demo-resolver.service.ts🎜🎜rrreee🎜Données de liste de publication renvoyées par résolveur. Maintenant, vous avez besoin d'une route pour configurer le résolveur, obtenir les données de la route, puis afficher les données dans le composant. Afin d'effectuer des sauts de routage, nous devons créer un composant. 🎜rrreee🎜Pour rendre l'itinéraire visible, ajoutez router-outlet dans app.component.ts. 🎜rrreee🎜Maintenant, vous pouvez configurer le fichier app-routing.module.ts. L'extrait de code suivant vous aidera à comprendre le résolveur de configuration de routage. 🎜🎜🎜app-routing-module.ts🎜🎜rrreee🎜Un resolve a été ajouté à la configuration de routage, il lancera une requête HTTP, puis lorsque Une fois la requête HTTP renvoyée avec succès, laissez le composant s'initialiser. La route assemblera les données renvoyées par la requête HTTP obtenue. 🎜

🎜Comment appliquer une navigation préchargée🎜

🎜Pour montrer à l'utilisateur qu'une requête est en cours, nous en écrivons une commune et simple dans AppComponent< /code> Le <code>chargeur. Vous pouvez le personnaliser selon vos besoins. 🎜

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!