Angular 5中Route Resolver未触发Observable（未调用subscribe）问题

嘿，我之前在Angular项目里用Resolver结合Firebase的时候也踩过这个坑，咱们一步步来排查和解决：

最常见的原因：Observable未完成 #

Angular的Resolver机制会等待Observable完成后才会激活目标路由，但Firebase的valueChanges()或者snapshotChanges()返回的是一个持续监听的Observable（只要数据变化就会发射新值），如果不手动让它完成，Resolver会一直等待，路由永远不会加载，看起来就像没触发请求。

解决方法很简单，用RxJS的take(1)操作符只取一次数据，让Observable完成：

import { take } from 'rxjs/operators';

@Injectable() 
export class ClassResolver implements Resolve<any> { 
  constructor(private db: AngularFireDatabase) {} 

  resolve(route: ActivatedRouteSnapshot): Observable<any> {
    // 先正确获取路由参数
    const idName = route.paramMap.get('idName');
    // 加上take(1)让Observable取完一次数据就完成
    return this.db.object(`classes/${idName}`).valueChanges().pipe(
      take(1)
    );
  }
}

别忘了注册Resolver到NgModule #

很多人会忽略这一步：如果Resolver没有被添加到模块的providers数组里，Angular根本找不到这个服务，自然不会调用它的resolve方法。

在你的路由模块（比如AppRoutingModule）里注册：

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [ClassResolver] // 必须在这里注册！
})
export class AppRoutingModule { }

组件里要正确获取Resolver的数据 #

有时候请求其实已经触发了，但你没在组件里正确读取数据，误以为没生效。可以在组件的ngOnInit里订阅ActivatedRoute.data：

import { ActivatedRoute } from '@angular/router';

@Component({...})
export class ClassComponent {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.data.subscribe((data) => {
      // data.classData就是Resolver返回的数据
      console.log('拿到的班级数据：', data.classData);
      // 在这里把数据赋值给组件属性用于渲染
    });
  }
}

或者更优雅地用async管道在模板里直接使用：

// 组件里定义
import { map } from 'rxjs/operators';

classData$ = this.route.data.pipe(map(data => data.classData));

// 模板里
<div *ngIf="classData$ | async as classData">
  {{ classData.name }}
</div>

其他排查点 #

• 检查Firebase的数据库路径是否正确，比如classes/${idName}是否对应你实际的数据节点；
• 确认Firebase的权限规则允许读取该节点，权限不足可能导致请求静默失败；
• 确保路由参数idName正确传递，比如导航时有没有带合法的参数值。

你可以按照上面的顺序排查，应该能解决你的问题～

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