Angular 2路由迁移至Angular 5：预加载逻辑适配咨询

你好呀！从你的代码来看，你之前用的是UI-Router来实现路由预加载逻辑，而Angular 5推荐使用官方的@angular/router（其实从Angular 4开始就已经是主流方案了），两者在预加载（resolve）的实现上有不少差异，我来帮你梳理下怎么迁移：

核心差异说明 #

原Angular 2代码里的resolve是UI-Router的配置方式，直接在路由state中定义依赖注入的函数；而Angular 5的官方Router要求把预加载逻辑封装成守卫类（实现Resolve接口），并通过模块注册的方式引入，结构更规范、可维护性更强。

具体迁移步骤 #

1. 创建预加载守卫类 #

首先，你需要把原preLoad里的逻辑抽成一个实现Resolve接口的服务类，这样才能被Angular Router识别：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { DataService } from './data.service'; // 替换成你的dataService实际路径

@Injectable()
export class DataPreloadResolver implements Resolve<any> {
  // 注入你的dataService
  constructor(private dataService: DataService) {}

  // 实现Resolve接口的resolve方法，对应原preLoad逻辑
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    // 返回的Observable/Promise会在路由激活前完成，确保数据加载完毕再进入页面
    return this.dataService.primeData();
  }
}

2. 配置Angular Router路由 #

接下来在你的路由模块中，把原UI-Router的state配置转换成Angular Router的Route对象：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DataComponent } from './data/data.component'; // 原templateUrl对应的组件，建议把模板封装到组件中
import { DataPreloadResolver } from './data-preload.resolver'; // 刚才创建的守卫类

const routes: Routes = [
  {
    path: 'data', // 对应原url: "/data"
    component: DataComponent, // 关联组件，原templateUrl可以写在这个组件的@Component装饰器里
    resolve: {
      // 这里的key可以自定义，后续在组件中通过route.data获取
      preLoad: DataPreloadResolver
    },
    // 原state中的caption、navOrder属于自定义元数据，统一放到data字段中
    data: {
      caption: "Search",
      navOrder: 1
    }
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  // 必须在这里注册守卫类，否则Angular无法注入
  providers: [DataPreloadResolver]
})
export class AppRoutingModule {}

3. 在组件中获取预加载的数据 #

最后，在你的DataComponent中，通过ActivatedRoute来获取预加载完成的数据：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-data',
  templateUrl: './data/data.tpl.html' // 保留原模板路径即可
})
export class DataComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // 通过订阅route.data获取预加载的数据
    this.route.data.subscribe(routeData => {
      const preloadedData = routeData.preLoad;
      // 这里可以处理预加载完成后的业务逻辑
      console.log('预加载数据已就绪:', preloadedData);
    });
  }
}

额外注意点 #

• 如果你的dataService.primeData()返回的是普通值而不是Observable/Promise，Angular Router也会自动处理，直接返回即可。
• 原UI-Router的其他路由特性（比如嵌套路由），Angular Router也有对应的实现方式，逻辑大同小异。

内容的提问来源于stack exchange，提问作者yams