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
적용을 시작할 수 있습니다. 리졸버
는 미들웨어 서비스이므로 하나 만들어 보겠습니다. 🎜<router-outlet></router-outlet>Loading...
🎜--skipTests=true 테스트 파일 생성 건너뛰기 🎜🎜
src/app/resolvers
폴더에 서비스가 생성됩니다. resolver
인터페이스에는 route
(ActivatedRouteSnapshot
의 인스턴스)라는 두 개의 매개변수가 있는 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>로더
. 필요에 따라 사용자 정의할 수 있습니다. 🎜app.component.html
<router-outlet></router-outlet>Loading...
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!