溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
簡介
為什么使用resolve：
當路由切換的時候，被路由的頁面中的元素（標簽）就會立馬顯示出來，同時，數據會被準備好并呈現出來。但是注意，數據和元素并不是同步的，在沒有任何設置的情況下，AngularJS默認先呈現出元素，而后再呈現出數據。這樣就會導致頁面會被渲染兩遍，導致“頁面UI抖動”的問題，對用戶不太友好。resolve的出現解決了這個問題。
resolve是干嘛用的：
resolve屬性里的值會在路由成功前被預先設定好，然后注入到控制器中。通俗地將，就是等數據都“就位”后，才進行路由（其實我覺得也不能叫路由，因為路由是一些列的操作，其中就包括了設置resolve屬性等等）。這樣的好處就是頁面僅會被渲染一遍。
這樣，我們就可以通過這種方式來動態加載相應的文件，減輕首頁加載的負擔。
一、使用場景
resolve保證了數據獲取后再進行路由跳轉，防止因為數據延遲而出現短暫的空組件情況，以此增強用戶體驗。
應用resolve還可以進行路由攔截，例如某些網站如果用戶未登錄，在跳轉到某一頁面時會提示未登錄然后強行回跳至前一頁面，這時如果使用resolve就可以在跳轉發生前判斷登錄狀態以決定是否允許跳轉。
二、基礎用法
示例中跳轉邏輯為 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), // 可選，只發出源 Observable 最初發出的的1個值
map(res => {
if (res) {
return res;
} else { // 請求失敗時攔截跳轉
this.router.navigate(['/home']);
return null;
}
})
);
}
}
由路由器提供的 Observable 必須完成，否則導航不會繼續。
detail.component.ts
// 通過 route 獲取 detail-resolver.service 中 detailService.getDetail 請求的數據
ngOnInit() {
this.route.data
.subscribe((data: { detail: Detail }) => {
this.detail = data.detail;
});
}
參考Angular中文網 <Resolve: 預先獲取組件數據>
API地址 <resolve守衛>
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
