传递要用作注入值的特定子组件的服务/提供商

Question

FormService包含部分表单的状态。

export class ArrayComponent implements OnInit {
formServices: FormService[] = [];
constructor(
@Inject(FormService) public parentFormService: FormService,
) {
}
ngOnInit(): void {
// Here I create lets say 10 FormService objects, that have to go to there separated child components.
this.parentFormService.data$.subscribe((d: any[]) => d.foreach((v: any) => this.formServices.push(new FormService(v))))
}
}

假设基于一些数据，我创建了一个新的FormService。我需要能够将这个创建的FormService传递给特定的子组件。

<ng-container *ngFor="let s of formServices">
<array-item [inject/providers]="s"></array-item>
</ng-container>

有没有办法把这个可注入的服务作为一个可注入的服务传递给组件?你可能会问为什么我需要它是可注入的，或者为什么我不能把它作为@Input传入。问题是，在组件树下有一个TextInputComponent，例如，它试图注入一个FormService来存储状态和做其他输入的事情。

我很想做@Component({providers: []})做的事情，但是在组件之外，所以我可以直接控制所提供的服务，并可以从Parent和Child组件访问它。

编辑://更精确的事情我想做简化

<array-item [inject/providers]="formServices[0]"></array-item>
<array-item [inject/providers]="formServices[1]"></array-item>
<array-item [inject/providers]="formServices[2]"></array-item>
<array-item [inject/providers]="formServices[3]"></array-item>

，然后在数组项组件中有一个组件使用@Inject注入FormService并使用它。

Answer 1

实际上所有子节点都可以访问父节点提供商，所以很简单:

@Component({providers: [FormService]})

可以满足你的所有要求。

对于不同的服务实例，可以这样设计:

为array-item [service-config]="..."组件添加输入。在组件:

@Inject(FormService) public parentFormService: FormService
ngOnInit() {
this.parentFormService.reConfigure(this.serviceConfig);
}

和子组件都可以访问该服务。

Answer 2

这是很有可能的。

对于每个孩子都有可能创建这样的Injector-

...
constructor(
...
private injector: Injector,
...
) {
}
...
Injector.create({providers: [...providder here...], parent: this.injector})

然后将其传递给一个组件，该组件将呈现如下的子元素-

...
@Input() injector!: Injector;
...
constructor(
...
public viewContainerRef: ViewContainerRef,
...
) {
}
...
ngOnInit(): void {
...
const component = this.viewContainerRef.createComponent(...Component..., {
...
injector: this.injector
...
}),
});
... // Set @Input attributes here with component.instance.
component.changeDetectorRef.detectChanges();
...
}