角11:将服务注入传递函数

Question

假设我有模特课：

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上面的评论的精神进行设计更改。