Angular 11：将服务注入传递的函数

Question

假设我有模型 class:

export class Model {
  id: number;
  editAction?: () => any;
}

然后一些组件创建具有定义函数的那些对象的数组

  someArray: Model[];

  constructor(private readonly injectedService: InjectedService) {}

  private createObjects(): void {
    this.someApiService.getData().subscribe((data) => {
    this.someArray = data.map(x => 
      ({id: x.id, editAction: someEditAction})
    );
  }

  private someEditAction(): void {
    this.injectedService
      .open(/* ... */)
  }

然后另一个组件，它通过 @Input() 获得了 someArray 尝试为 HTML 中的每个元素调用 editAction（它都正常工作）：

模板：

<div *ngFor="let item of someArray">
  <button (click)="item.editAction()">
</div>

Component:
@Input() someArray: Model[];

问题是在我们点击这个按钮之后，函数“someEditAction”实际上被调用了，但是它没有来自它的第一个组件的依赖并且它抛出错误，injectedService 是 null。有没有办法将此服务注入该功能？ InjectedService当然照例用providedIn: 'root'装饰。我尝试构建 factoryProvider，但我认为我做错了

Answer 1

而不是这个：

({id: x.id, editAction: someEditAction})

这样写：

({id: x.id, editAction: () => this.someEditAction()})

这将保持正确的 this。

编辑：话虽如此，应考虑按照@DeborahK 上述评论的精神进行设计更改。

Angular 11：将服务注入传递的函数

Angular 11: inject service into a passed function

dependency-injection

angular