參考Angular中文網 <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; 
    });
}