從?Angular?Route?中提前獲取數(shù)據(jù)的方法詳解
介紹
提前獲取意味著在數(shù)據(jù)呈現(xiàn)在屏幕之前獲取到數(shù)據(jù)。本文中,你將學(xué)到,在路由更改前怎么獲取到數(shù)據(jù)。通過本文,你將學(xué)會使用 resolver, 在 Angular App 中應(yīng)用 resolver,應(yīng)用到一個公共的預(yù)加載導(dǎo)航。
你為什么應(yīng)該使用 Resolver
Resolver 在路由跟組件之間扮演著中間件服務(wù)的角色。假設(shè)你有一個表單,沒有數(shù)據(jù)時,你想向用戶一個空的表單,當(dāng)在加載用戶數(shù)據(jù)時展示一個 loader,然后當(dāng)數(shù)據(jù)返回時,填充表單并隱藏 loader。
通常,我們都會在組件的 ngOnInit() 鉤子函數(shù)中獲取數(shù)據(jù)。也就是說,組件加載完之后,我們發(fā)起數(shù)據(jù)請求。
在 ngOnInit() 中操作,我們需要在每個需要的組件加載后,在其路由頁面中添加 loader 展示。Resolver 可以簡化 loader 的添加使用。你可以只添加一個適用于每個路由的 loader,而不是每個路由中都添加 loader。
本文將結(jié)合示例來解析 resolver 的知識點。以便于你可以牢記它并在項目中使用它。
在應(yīng)用中使用 Resolver
為了在應(yīng)用中使用 resolver,你需要準備一些接口。你可以通過 JSONPlaceholder 來模擬,而不需要自己開發(fā)。
JSONPlaceholder 是一個很棒的接口資源,你可以借助它更好學(xué)習(xí)前端的相關(guān)概念而不被接口所約束。
現(xiàn)在,接口的問題解決了,我們可以開始 resolver 的應(yīng)用了。一個 resolver 就是一個中間件服務(wù),所以我們將創(chuàng)建一個服務(wù)。
$ ng g s resolvers/demo-resolver --skipTests=true
--skipTests=true 跳過生成測試文件
src/app/resolvers 文件夾中創(chuàng)建了一個服務(wù)。resolver 接口中有一個 resolve() 方法,它有兩個參數(shù):route(ActivatedRouteSnapshot 的實例)和 state(RouterStateSnapshot 的實例)。
loader 通常是在 ngOnInit() 中編寫所有的 AJAX 請求,但是邏輯將會在 resolver 中實現(xiàn),替代 ngOnInit()。
接著,創(chuàng)建一個服務(wù)來獲取 JSONPlaceholder 中列表數(shù)據(jù)。然后在 resolver 中底調(diào)用,接著在路由中配置 resolve信息,(頁面將會等待)直到 resolver 被處理。在 resolver 被處理之后,我們可以通過路由來獲取數(shù)據(jù)然后展示在組件中。
創(chuàng)建服務(wù)并編寫邏輯獲取列表數(shù)據(jù)
$ ng g s services/posts --skipTests=true
現(xiàn)在,我們成功創(chuàng)建了服務(wù),是時候編寫一個 AJAX 請求的邏輯了。
model 的使用能夠幫助我們減少錯誤。
$ ng g class models/post --skipTests=true
post.ts
export class Post {
id: number;
title: string;
body: string;
userId: string;
}model 就緒,是時候獲取帖子 post 的數(shù)據(jù)了。
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);
}
}現(xiàn)在,這個服務(wù)隨時可被調(diào)用。
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();
}
}帖子列表數(shù)據(jù)從 resolver 中返回?,F(xiàn)在,你需要一個路由去配置 resolver,從路由獲取數(shù)據(jù),然后讓數(shù)據(jù)展示在組件中。為了進行路由跳轉(zhuǎn),我們需要創(chuàng)建一個組件。
$ ng g c components/post-list --skipTests=true
為了路由可見,在 app.component.ts 添加 router-outlet。
<router-outlet></router-outlet>
現(xiàn)在,你可以配置 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 已經(jīng)添加到路由配置中了,它將發(fā)起一個 HTTP 請求,然后當(dāng) HTTP 請求成功返回后,允許組件初始化。路由將組裝獲取到的 HTTP 請求返回的數(shù)據(jù)。
怎么應(yīng)用一個預(yù)加載導(dǎo)航
向用戶展示一個請求正在進行,我們在 AppComponent 中編寫一個公共且簡單的 loader。你可以根據(jù)需要自定義。
app.component.html
<div class="loader" *ngIf="isLoader"> <div>Loading...</div> </div> <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;
}
}
});
}
}當(dāng)導(dǎo)航開始,isLoader 值被賦予 true,頁面中,你將看到下面的效果。

當(dāng) resolver 處理完之后,它將會被隱藏。
現(xiàn)在,是時候從路由中獲取值并將其展示出來。
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 預(yù)處理器編寫樣式
從路由中獲取數(shù)據(jù)之后,它會被展示在 HTML 中。效果如下快照。

至此,你已經(jīng)了解完怎么應(yīng)用 resolver 在你的項目中了。
總結(jié)
結(jié)合用戶體驗設(shè)計,在 resolver 的加持下,你可以提升你應(yīng)用的表現(xiàn)。了解更多,你可以戳官網(wǎng)。
本文是譯文,采用的是意譯的方式,其中加上個人的理解和注釋,原文地址是:www.pluralsight.com/guides/pref…
到此這篇關(guān)于從 Angular Route 中提前獲取數(shù)據(jù)的文章就介紹到這了,更多相關(guān)Angular Route獲取數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
angular6.0開發(fā)教程之如何安裝angular6.0框架
這篇文章主要介紹了angular6.0開發(fā)教程之如何安裝angular6.0框架,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
詳解angularjs 關(guān)于ui-router分層使用
本篇文章主要介紹了詳解angularjs 關(guān)于ui-router分層使用,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06
AngularJS實現(xiàn)給動態(tài)生成的元素綁定事件的方法
這篇文章主要介紹了AngularJS實現(xiàn)給動態(tài)生成的元素綁定事件的方法,結(jié)合實例形式分析了AngularJS動態(tài)生成元素與事件綁定相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
AngularJs定制樣式插入到ueditor中的問題小結(jié)
這篇文章主要介紹了AngularJs定制樣式插入到ueditor中的問題小結(jié)的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-08-08
AngularJS內(nèi)建服務(wù)$location及其功能詳解
這篇文章主要為大家詳細介紹了AngularJS內(nèi)建服務(wù)$location及$location功能,感興趣的小伙伴們可以參考一下2016-07-07

