Angular: resolve 守卫

本文介绍: Angular: resolve 守卫

resolve 守卫的作用

在使用真实API时，很有可能因为数据返回有延迟，导致无法及时显示，也就是空白页面。
所以期望等所有数据都准备好了，才渲染路由组件，这就需要 Resolve 守卫，导航前预先加载路由信息
当路由切换的时候，被路由的页面中的元素（标签）就会立马显示出来，同时，数据会被准备好并呈现出来。但是注意，数据和元素并不是同步的，在没有任何设置的情况下，AngularJS默认先呈现出元素，而后再呈现出数据。这样就会导致页面会被渲染两遍，导致“页面UI抖动”的问题，对用户不太友好。resolve的出现解决了这个问题。

resolve 的使用

resolve属性里的值会在路由成功前被预先设定好，然后注入到控制器中。
就是等数据都“就位”后，才进行路由（其实也不能叫路由，因为路由是一些列的操作，其中就包括了设置resolve属性等等）。
这样的好处就是页面仅会被渲染一遍。

sheetInfo.resolve.ts

import { Injectable } from "@angular/core";
import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
import { Observable } from 'rxjs';
import { SheetService } from '../../services/sheet.service';

@Injectable()
export class SheetInfoResolverService implements Resolve<SongSheet> {
  constructor(private sheetServe: SheetService) {}
  resolve(route: ActivatedRouteSnapshot): Observable<SongSheet> {
    return this.sheetServe.getSongSheetDetail(Number(route.paramMap.get('id')));
  }
}

sheetInfo-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [{
  path: 'sheetInfo/:id',
  component: SheetInfoComponent,
  data: {
    title: '歌单详情'
  },
  resolve: {
    sheetInfo: SheetInfoResolverService
  }
}];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: [SheetInfoResolverService]
})
export class SheetInfoRoutingModule { }

sheetInfo.component.ts

import { ActivatedRoute } from '@angular/router';
import { map } from 'rxjs/internal/operators';

export class SheetInfoComponent implements OnInit {
  constructor(
    private route: ActivatedRoute
  ) { 
    this.route.data.pipe(map(res => res.sheetInfo)).subscribe(res => {
      ...
    })
  }
}