Angular Route에서 미리 데이터를 얻는 방법에 대해 이야기해보겠습니다.

Angular Route에서 미리 데이터를 얻는 방법은 무엇입니까? 다음 글에서는 Angular Route에서 미리 데이터를 얻는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

미리 잡는 것은 데이터가 화면에 표시되기 전에 가져오는 것을 의미합니다. 이 문서에서는 변경 사항을 라우팅하기 전에 데이터를 얻는 방법을 알아봅니다. 이 글을 통해 resolver를 사용하고, Angular App에서 resolver를 적용하고, 미리 로드된 일반적인 탐색에 적용하는 방법을 배웁니다. [추천 관련 튜토리얼: "Angular 튜토리얼"]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

Resolver🎜

🎜를 사용해야 하는 이유 Resolver는 라우팅과 컴포넌트 사이의 미들웨어 서비스 역할을 합니다. 데이터가 없는 양식이 있고 사용자에게 빈 양식을 표시하고 사용자 데이터가 로드될 때 로더를 표시한 다음 데이터가 반환되면 양식을 채우고 로더를 숨깁니다. 🎜🎜보통 컴포넌트의 ngOnInit() 후크 함수에서 데이터를 가져옵니다. 즉, 구성 요소가 로드된 후 데이터 요청을 시작합니다. 🎜🎜ngOnInit()의 작업에서는 각 필수 구성 요소가 로드된 후 라우팅 페이지에 loader 표시를 추가해야 합니다. Resolver는 loader의 추가 및 사용을 단순화할 수 있습니다. 모든 경로에 로더를 추가하는 대신 각 경로에 적용되는 로더 하나만 추가하면 됩니다. 🎜🎜이 글에서는 예제를 사용하여 리졸버의 지식 포인트를 분석합니다. 그래야 기억하고 프로젝트에 사용할 수 있습니다. 🎜

🎜애플리케이션에서 Resolver 사용🎜

🎜애플리케이션에서 resolver를 사용하려면 다음이 필요합니다. 인터페이스를 준비합니다. 직접 개발하지 않고도 JSONPlaceholder를 통해 시뮬레이션할 수 있습니다. 🎜🎜JSONPlaceholder는 인터페이스의 제약을 받지 않고 프런트 엔드 관련 개념을 더 잘 배우는 데 사용할 수 있는 훌륭한 인터페이스 리소스입니다. 🎜🎜이제 인터페이스 문제가 해결되었으므로 resolver 적용을 시작할 수 있습니다. 리졸버는 미들웨어 서비스이므로 하나 만들어 보겠습니다. 🎜

  
Loading...

<router-outlet></router-outlet>

🎜--skipTests=true 테스트 파일 생성 건너뛰기 🎜

🎜 src/app/resolvers 폴더에 서비스가 생성됩니다. resolver 인터페이스에는 route(ActivatedRouteSnapshot</code의 인스턴스)라는 두 개의 매개변수가 있는 <code>resolve() 메서드가 있습니다. >) 및 state(RouterStateSnapshot의 인스턴스). 🎜🎜loader는 일반적으로 모든 AJAX 요청을 ngOnInit()에 작성하지만 로직은 resolver에 있습니다. , ngOnInit()를 대체합니다. 🎜🎜다음으로 JSONPlaceholder에서 목록 데이터를 가져오는 서비스를 만듭니다. 그런 다음 resolver에서 호출한 다음 resolver가 처리될 때까지 경로에서 resolver 정보를 구성합니다(페이지는 대기합니다). resolver가 처리된 후 라우팅을 통해 데이터를 가져와서 컴포넌트에 표시할 수 있습니다. 🎜

🎜서비스를 생성하고 목록 데이터를 가져오는 로직을 작성하세요🎜

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

🎜이제 서비스가 성공적으로 생성되었으므로 <코드>를 작성할 차례입니다. AJAX 요청 로직. 🎜🎜모델을 사용하면 오류를 줄이는 데 도움이 될 수 있습니다. 🎜

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>

🎜모델이 준비되었습니다. 이제 게시물 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;
}

🎜이제 이 서비스는 언제든지 호출할 수 있습니다. 🎜🎜🎜demo-resolver.service.ts🎜🎜rrreee🎜 resolver에서 반환된 게시물 목록 데이터입니다. 이제 resolver를 구성하고 경로에서 데이터를 가져온 다음 구성 요소에 데이터를 표시하는 경로가 필요합니다. 라우팅 점프를 수행하려면 구성요소를 생성해야 합니다. 🎜rrreee🎜경로를 표시하려면 app.comComponent.ts에 router-outlet을 추가하세요. 🎜rrreee🎜이제 app-routing.module.ts 파일을 구성할 수 있습니다. 다음 코드 조각은 라우팅 구성 resolver를 이해하는 데 도움이 됩니다. 🎜🎜🎜app-routing-module.ts🎜🎜rrreee🎜A resolve가 라우팅 구성에 추가되어 HTTP 요청이 시작되고, > HTTP 요청이 성공적으로 반환되면 구성 요소가 초기화되도록 허용합니다. 경로는 획득된 HTTP 요청에 의해 반환된 데이터를 조합합니다. 🎜

🎜미리 로드된 탐색을 적용하는 방법🎜

🎜사용자에게 요청이 진행 중임을 표시하기 위해 AppComponent<에 일반적이고 간단한 요청을 작성합니다. /code> <code>로더. 필요에 따라 사용자 정의할 수 있습니다. 🎜

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!