快捷導(dǎo)航

Angular resolve基礎(chǔ)用法詳解

更新時(shí)間：2018年10月03日 08:46:00 作者：SwitchCase_

resolve保證了數(shù)據(jù)獲取后再進(jìn)行路由跳轉(zhuǎn)，防止因?yàn)閿?shù)據(jù)延遲而出現(xiàn)短暫的空組件情況，本文就介紹一下Angular resolve基礎(chǔ)用法，感興趣的小伙伴們可以參考一下

簡(jiǎn)介

為什么使用resolve：

當(dāng)路由切換的時(shí)候，被路由的頁(yè)面中的元素（標(biāo)簽）就會(huì)立馬顯示出來(lái)，同時(shí)，數(shù)據(jù)會(huì)被準(zhǔn)備好并呈現(xiàn)出來(lái)。但是注意，數(shù)據(jù)和元素并不是同步的，在沒(méi)有任何設(shè)置的情況下，AngularJS默認(rèn)先呈現(xiàn)出元素，而后再呈現(xiàn)出數(shù)據(jù)。這樣就會(huì)導(dǎo)致頁(yè)面會(huì)被渲染兩遍，導(dǎo)致“頁(yè)面UI抖動(dòng)”的問(wèn)題，對(duì)用戶(hù)不太友好。resolve的出現(xiàn)解決了這個(gè)問(wèn)題。

resolve是干嘛用的：

resolve屬性里的值會(huì)在路由成功前被預(yù)先設(shè)定好，然后注入到控制器中。通俗地將，就是等數(shù)據(jù)都“就位”后，才進(jìn)行路由（其實(shí)我覺(jué)得也不能叫路由，因?yàn)槁酚墒且恍┝械牟僮鳎渲芯桶嗽O(shè)置resolve屬性等等）。這樣的好處就是頁(yè)面僅會(huì)被渲染一遍。

這樣，我們就可以通過(guò)這種方式來(lái)動(dòng)態(tài)加載相應(yīng)的文件，減輕首頁(yè)加載的負(fù)擔(dān)。

一、使用場(chǎng)景

resolve保證了數(shù)據(jù)獲取后再進(jìn)行路由跳轉(zhuǎn)，防止因?yàn)閿?shù)據(jù)延遲而出現(xiàn)短暫的空組件情況，以此增強(qiáng)用戶(hù)體驗(yàn)。

應(yīng)用resolve還可以進(jìn)行路由攔截，例如某些網(wǎng)站如果用戶(hù)未登錄，在跳轉(zhuǎn)到某一頁(yè)面時(shí)會(huì)提示未登錄然后強(qiáng)行回跳至前一頁(yè)面，這時(shí)如果使用resolve就可以在跳轉(zhuǎn)發(fā)生前判斷登錄狀態(tài)以決定是否允許跳轉(zhuǎn)。

二、基礎(chǔ)用法

示例中跳轉(zhuǎn)邏輯為 home.component => resolve.service => detail.component

home-routing.module.ts

import { NgModule }    from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DetailResolver }  from './detail-resolver.service';
import { DetailComponent }  from './detail.component';

const routes: Routes = [
 {
 path: ':id',
 component: DetailComponent,
 resolve: { // 此處使用resolve
  detail: DetailResolver
 }
 },
];
@NgModule({
 imports: [
 RouterModule.forChild(routes)
 ],
 exports: [
 RouterModule
 ],
 providers: [
 DetailResolver
 ]
})
export class HomeRoutingModule { }

detail-resolver.service.ts

import { Injectable }    from '@angular/core';
import { Router, Resolve, RouterStateSnapshot,
   ActivatedRouteSnapshot } from '@angular/router';
import { Observable }    from 'rxjs';
import { map, take }    from 'rxjs/operators';

import { detail, DetailService } from './detail.service';

@Injectable()
export class DetailResolver implements Resolve<Detail> {
 constructor(private detailService: DetailService, private router: Router) {}

 resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Detail> {
 let id = route.paramMap.get('id');

 return this.detailService.getDetail(id).pipe(
  take(1), // 可選，只發(fā)出源 Observable 最初發(fā)出的的1個(gè)值
  map(res => {
  if (res) {
   return res;
  } else { // 請(qǐng)求失敗時(shí)攔截跳轉(zhuǎn)
   this.router.navigate(['/home']);
   return null;
  }
  })
 );
 }
}

由路由器提供的 Observable 必須完成，否則導(dǎo)航不會(huì)繼續(xù)。

detail.component.ts

// 通過(guò) route 獲取 detail-resolver.service 中 detailService.getDetail 請(qǐng)求的數(shù)據(jù)
ngOnInit() {
 this.route.data
 .subscribe((data: { detail: Detail }) => {
  this.detail = data.detail; 
 });
}

參考Angular中文網(wǎng) <Resolve: 預(yù)先獲取組件數(shù)據(jù)>

API地址 <resolve守衛(wèi)>

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: