Angular 6 Resolver返回Observable时组件无法加载问题求助

兄弟我懂你这种被逼疯的感觉！我之前也在Angular Resolver上踩过类似的坑，咱们来一步步捋清楚问题出在哪。

核心问题：你用错了Observable.create()的写法！ #

你现在写的Observable.create(true)完全不符合这个API的要求：Observable.create()接收的是一个订阅函数（也就是带有observer参数的回调函数），而不是直接传值。这种错误写法会导致你的Observable既不发出值，也不会完成——Angular的Resolver会一直等待这个Observable完成，自然就不会继续导航到目标组件，页面也就变成空白了。

正确的写法有两种 #

1. 用of()操作符（最推荐）

这是创建同步Observable最简单的方式，of(true)会立即发出true这个值，并且自动完成Observable，Resolver拿到后就会放行路由：

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

@Injectable()
export class MyResolver implements Resolve<boolean> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    // 正确返回一个立即完成的Observable
    return of(true);
  }
}

2. 正确使用Observable.create()（不推荐，除非你有特殊需求）

如果一定要用create，必须手动调用observer.next()发出值，再调用observer.complete()告诉Resolver任务完成：

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

@Injectable()
export class MyResolver implements Resolve<boolean> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return Observable.create(observer => {
      observer.next(true); // 发出要解析的值
      observer.complete(); // 关键！必须调用complete，Resolver才会继续导航
    });
  }
}

为什么返回布尔值正常？ #

当你直接返回true这种同步值时，Angular会自动帮你把它包装成一个已完成的Observable，所以Resolver能正常识别，顺利放行到组件。

额外提醒（处理异步场景） #

如果你的Resolver是用来处理异步操作（比如HTTP请求），要确保那个Observable最终会完成——比如Angular的HttpClient返回的Observable，在收到响应后会自动完成，这种情况就没问题。但如果是自定义的Observable，一定要记得调用complete()，不然Resolver会一直卡着！

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