Angular 使用 Resolve 預先獲取組件數據

這幾天碰到一個需求，登陸後要根據用戶信息的不一樣跳轉到不一樣的頁面。 好比默認登陸要求跳轉到A頁面，若是A的頁面中表格數據是空則要求登陸後要直接跳轉到B頁面。 若是在pageA的組件中的ngInit中判斷，你會先看到pageA而後再跳到pageB，這樣用戶體驗不太好。 這就要求在路由變化發生以前就要拿到後臺返回的數據。這個時候咱們能夠使用Resolve 來實。

1. 新建Resolve文件，這裏起名 FxAccountListResolverService 要求實現Resolve方法，該方法能夠返回一個 Promise、一個 Observable 來支持異步方式，或者直接返回一個值來支持同步方式。

import { Injectable } from '@angular/core';
import { Router, Resolve, } from '@angular/router';
import { AccountService } from '../_services';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class FxAccountListResolverService implements Resolve<any> {
  constructor(
    public service: AccountService,
    public router: Router,
  ) {
  }

  resolve() {
    return this.service.getAccountList()
      .pipe(map(response => {
        if (response.success) {
          if (response.data.length && response.data.length === 1) {
            this.router.navigate(['/pageB']);
          } else {
            return response.data;
          }
        } else {
          return [];
        }
      }));
  }
}
複製代碼

2. 修改路由，添加 resolve 配置

{
        path: 'accounts',
        component: FxAccountListComponent,
        resolve: {
          data: FxAccountListResolverService,
        }
      },
複製代碼

3. 修改 FxAccountListComponent 中的 ngOnInit 以前代碼，咱們是在組件中取數據，由於覺得改爲了從 resolve 中取數據

this.service.getAccountList().subscribe( (res: Account) => {
 // ...
});
複製代碼

改成以下，這裏route.snapshot.data 就是後臺返回的數據

let result = this.route.snapshot.data.data;
複製代碼

參考：angular.cn/guide/route…