Angular4中使用Resolve预加载数据失败，请求排查指导

我仔细看了你的代码，很快就发现了问题所在——你的Resolver服务里手动创建的Observable没有完成（complete）！

Angular的Resolve机制有个关键规则：它会等待Resolver返回的Observable完成后，才会把解析好的数据传递给路由组件。你现在的代码里只调用了observer.next(150)来发送数据，但没有告诉Observable“数据已经全部传递完毕”，所以路由会一直处于等待状态，组件自然拿不到任何数据。

下面是具体的修复步骤：

1. 修复Resolver服务的Observable #

修改你的ResolverService，在发送数据后调用observer.complete()：

import { Injectable } from '@angular/core';
import { Router, Resolve, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class ResolverService implements Resolve<any> {
 constructor(private router: Router) { }
 resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
  return new Observable(observer => {
   setTimeout(() => {
    observer.next(150);
    observer.complete(); // 必须添加这一行，通知Observable完成
   }, 1000);
  });
 }
}

补充说明：如果是真实项目中用HttpClient发起请求，它返回的Observable会自动完成，不需要手动调用complete；但手动创建Observable时，一定要记得调用这个方法结束流。

2. 优化组件的数据订阅（可选但推荐） #

你现在在ngAfterViewInit里订阅路由数据，其实可以把这个逻辑放到ngOnInit里——这是Angular组件初始化逻辑的标准位置，而且能更早拿到数据：

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

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 constructor(private route: ActivatedRoute) { }
 ngOnInit() {
  this.route.data.subscribe(success => {
   console.log('拿到的解析数据：', success.transaction); // 通过路由配置里的key获取对应数据
   debugger;
  })
 }
}

这里要注意，route.data返回的是一个对象，里面的transaction就是你在路由配置resolve: { transaction: ResolverService }里定义的key，直接通过这个key就能拿到你要的150。

额外确认 #

你的路由配置和服务注册都是正确的——已经把ResolverService加到了模块的providers里，路由也正确绑定了resolve规则，这部分不用改。

按照上面的步骤修改后，你就能在组件里正常拿到Resolver传递的数据了！

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