Angular——resolve基礎用法

摘要： 參考Angular中文網<Resolve: 預先獲取元件資料> API地址<resolve守衛> 一、使用場景 resolve保證了資料獲取後再進行路由跳轉，防...

參考Angular中文網ofollow,noindex"><Resolve: 預先獲取元件資料>

API地址<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; 
});
}