Angular路由Resolve返回的自定义服务无法注入HttpClient依赖如何解决？

问题原因 #

你当前手动调用new DoctorSpecialitiesService()实例化服务，绕开了Angular的依赖注入（DI）系统，因此构造函数中声明的HttpClient参数无法被自动注入，才会触发参数缺失的报错。

解决方案 #

步骤1：给目标服务声明可注入配置 #

先给DoctorSpecialitiesService添加@Injectable装饰器，指定服务的提供范围：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root' // 也可以替换为你业务模块的providers数组配置
})
export class DoctorSpecialitiesService {
  constructor(private _http: HttpClient) {
    // 原有业务逻辑
  }
}

同时确保你使用HttpClient的对应模块（根模块/业务模块）已经导入了HttpClientModule：

// 以AppModule为例
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // 其他原有导入
    HttpClientModule
  ]
})
export class AppModule {}

步骤2：修改Resolver的实现 #

不要手动实例化服务，改为将DoctorSpecialitiesService注入到Resolver中，直接返回DI创建好的实例即可：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { DoctorSpecialitiesService } from './xxx路径/doctor-specialities.service';

@Injectable()
export class DoctorSpecialitiesServiceResolver implements Resolve<any> {
  // Angular DI会自动完成服务的实例化和HttpClient的注入
  constructor(private doctorSpecialitiesService: DoctorSpecialitiesService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.doctorSpecialitiesService;
  }
}

修改完成后原有路由配置不需要改动，组件从ActivatedRoute中取服务的逻辑也可以完全复用。

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