如何在Angular中注入具有构造函数参数的对象？

Question

我非常喜欢 Angular，我想弄清楚如何将参数传递给正在注入组件的对象构造函数。

这是一个例子：

image-capture.service.ts

@Injectable({ providedIn: 'root'})
export class ImageCapture {

  constructor(
    private sdk: any,
    private videoSource: HTMLVideoElement,
    private cameraFeedback: HTMLCanvasElement) {}
}

image-scanner.component.ts

@Component({
  selector: 'app-document-scanner-component',
  templateUrl: './app-document-scanner-component.html',
  styleUrls: ['./app-document-scanner-component.scss'],
})
export class ImageScannerComponent {

  @ViewChild('video') video!: ElementRef<HTMLVideoElement>;
  @ViewChild('cameraFeedback') feedback!: ElementRef<HTMLCanvasElement>;

  constructor(private imageCaptureService: ImageCapture) { }

}

在image-scanner. component 中，我需要传递给注入对象ImageCapture 几个构造函数参数，一个是正在导入的SDK 实例，第二个参数是我使用@ViewChild 装饰器获得的HTML DOM 元素。

我怎样才能做到这一点？

Answer 1

您不能将参数传递给服务的构造函数，因为您的服务是在加载应用程序时创建的。因此，当您在组件中使用服务时，该服务已经被实例化了。

解决方案是在您的服务中创建一个函数：

public initialize(sdk: any,videoSource: HTMLVideoElement,cameraFeedback: HTMLCanvasElement) {}

那么你只需要在你的组件的构造函数中调用这个函数。