Angular中PredService依赖注入报错及构造函数传参疑问

问题描述 #

这是Angular里的常见问题，但我没找到适配自己场景的解决方案。

我编写了如下服务：

import { Injectable } from '@angular/core';

export interface PredictionInputs {
  birthDate: Date;
  HCP: boolean;
  dayOnes: {
    dayOne: Date;
    approx: boolean;
  }[];
}

@Injectable({
  providedIn: 'root'
})

export class PredService {

  constructor(data: PredictionInputs) { 
    console.log(data);
  }
 
}

对应的组件代码：

import { Component, OnInit } from '@angular/core';
import { PredService as PredictionService, PredictionInputs } from 'src/app/services/pred.service';

@Component({
  selector: 'app-test',
  templateUrl: './test.page.html',
  styleUrls: ['./test.page.scss'],
  providers: [PredictionService],
})

export class TestPage implements OnInit {

  constructor(private prediction: PredictionService) {
    const dayOnes = [];
    dayOnes.push({ dayOne: new Date('2023-05-22'), approx: false });
    dayOnes.push({ dayOne: new Date('2023-04-15'), approx: false });

    const ex7: PredictionInputs = {
      birthDate: new Date('1985-06-05'),
      HCP: false,
      dayOnes: dayOnes,
    };

    this.prediction = new PredictionService(ex7);
  }

  ngOnInit() {
    
  }
}

Angular给出的错误提示：

Either add the @Injectable() decorator to 'PredService', or configure a different provider (such as a provider with 'useFactory').

明明已经给PredService加了@Injectable()装饰器，却还是报错，请问有什么解决思路？

编辑补充 #

根据回复修改了代码后，现在能正常运行，但我还有疑问：

PredService修改后：

export class PredService {

  constructor() { 
    //console.log(data);
  }
  getPrediction(data: PredictionInputs) {
    console.log(data);
  } 
}

TestPage修改后：

...
//this.prediction = new PredictionService(ex7);
    this.prediction.getPrediction(ex7);

为什么需要新增getPrediction方法？不能直接在构造函数里执行console.log(data)吗？

问题解析 #

1. 原代码报错的核心原因 #

Angular的依赖注入（DI）系统要求：当你通过providers数组或providedIn声明服务时，DI容器会负责创建服务实例。你的PredService构造函数需要一个PredictionInputs类型的参数，但这个参数不属于Angular能自动识别并注入的依赖范畴（比如其他服务、内置令牌），DI容器不知道该怎么提供这个参数，所以即便加了@Injectable()，还是会抛出错误。

另外你在组件构造函数里手动new PredictionService(ex7)，同时又让DI注入了一个服务实例，这本身就违背了依赖注入的设计初衷——服务应该由DI容器统一管理生命周期，手动实例化会产生两个独立的服务实例，干扰DI的正常工作。

2. 修改后代码能运行的原因 #

修改后的服务构造函数没有依赖参数，DI容器可以轻松创建实例并注入到组件中。通过getPrediction方法传入数据，是Angular服务的标准使用逻辑：服务实例由DI容器创建后，通过调用实例方法来传递业务数据，既保留了DI管理生命周期的优势，又能灵活传递动态数据。

3. 能不能在构造函数里处理data？ #

不是绝对不行，但不能像你最初那样直接写。如果一定要在构造函数里接收数据，需要通过**工厂提供者（useFactory）**配置服务的创建逻辑，告诉DI容器如何生成带参数的服务实例：

比如在组件的providers里这样配置：

@Component({
  // ...其他配置项
  providers: [
    {
      provide: PredictionService,
      useFactory: () => {
        const dayOnes = [
          { dayOne: new Date('2023-05-22'), approx: false },
          { dayOne: new Date('2023-04-15'), approx: false }
        ];
        const ex7: PredictionInputs = {
          birthDate: new Date('1985-06-05'),
          HCP: false,
          dayOnes: dayOnes,
        };
        return new PredictionService(ex7);
      }
    }
  ]
})

但这种方式局限性很大：数据硬编码在工厂函数里，无法从组件动态传递。所以更灵活、符合最佳实践的方式，还是像你修改后的那样——通过服务的实例方法传递动态数据，让DI容器负责管理服务的生命周期。

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