簡介

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),羅莊企業(yè)網(wǎng)站建設(shè),羅莊品牌網(wǎng)站建設(shè),網(wǎng)站定制,羅莊網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,羅莊網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

為什么使用resolve：

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

resolve是干嘛用的：

resolve屬性里的值會在路由成功前被預(yù)先設(shè)定好，然后注入到控制器中。通俗地將，就是等數(shù)據(jù)都“就位”后，才進行路由（其實我覺得也不能叫路由，因為路由是一些列的操作，其中就包括了設(shè)置resolve屬性等等）。這樣的好處就是頁面僅會被渲染一遍。

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

一、使用場景

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

應(yīng)用resolve還可以進行路由攔截，例如某些網(wǎng)站如果用戶未登錄，在跳轉(zhuǎn)到某一頁面時會提示未登錄然后強行回跳至前一頁面，這時如果使用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 {
 constructor(private detailService: DetailService, private router: Router) {}

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

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

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

detail.component.ts

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

參考Angular中文網(wǎng)

API地址

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對創(chuàng)新互聯(lián)的支持。