簡介

創(chuàng)新互聯(lián)是一家專業(yè)提供佛山企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站制作、做網(wǎng)站、H5頁面制作、小程序制作等業(yè)務(wù)。10年已為佛山眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

為什么使用resolve：

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

resolve是干嘛用的：

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

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

一、使用場(chǎng)景

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

應(yīng)用resolve還可以進(jìn)行路由攔截，例如某些網(wǎng)站如果用戶未登錄，在跳轉(zhuǎn)到某一頁面時(shí)會(huì)提示未登錄然后強(qiáng)行回跳至前一頁面，這時(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 { }

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁名稱：Angularresolve基礎(chǔ)用法詳解-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://weahome.cn/article/dojdoj.html