为组件提供依赖于组件@Input的服务实例

Question

我有一个主要细节组件，其中包含子网格和细节组件。

基于@InputentityType参数，网格和详细信息组件需要将其特定的dataService属性初始化为DataService1，DataService2，...或DataServiceN。实现这一目标的最佳方法是什么？我看到各种可能性：

1. [使用@Injectable方法创建createServiceInstance(entityType)工厂服务：

   public createService(type: EntityType): any {
       switch (type) {
           case EntityType.Type1:
               return new DataService1();
           case EntityType.Type2:
               return new DataService2();
           case EntityType.TypeN:
               return new DataServiceN();
       }
   }
   

   然后将该服务注入到Master-Detail Component构造函数中并指定do

   this.dataService = this.factoryService.createService(entityType)
   

   在ngOnInit / ngOnChanges中。然后，我们将@Input dataService添加到网格和详图组件，并将其绑定到masterDetail dataService属性。

2. 在详细信息/网格组件中使用Injector服务，将@Component装饰器的providers属性设置为[DataService1，DataService2，...，DataServiceN]，然后在ngOnInit中执行

   this.dataService = this.injector.get(getDataService(entityType))
   

   with

   export function getDataService(entityType: string): any {
       switch (type) {
           case EntityType.Type1:
               return DataService1;
           case EntityType.Type2:
               return DataService2;
           case EntityType.TypeN:
               return DataServiceN;
       }
   }
   

3. 使用1）和2）的混合：在其构造函数中向ServiceFactory提供[DataService1，DataService2，...，DataServiceN]，然后为详细信息/网格组件ngOnInit做]

   this.dataService = this.factoryService.getDataService(entityType)
   

   with

   getDataService(entityType: string): any {
       switch (type) {
           case EntityType.Type1:
               return this.dataService1;
           case EntityType.Type2:
               return this.dataService2;
           case EntityType.TypeN:
               return this.dataServiceN;
       }
   }
   

4. 另一个解决方案？

我正在将Angular 4与TypeScript一起使用。

Answer 1

我有一个类似的问题，找到了以下可行的解决方案：

我有FileService接口：

export interface FileService {
    downloadDocument(ownerId: string, fileId: string): Observable<any>;
}

然后，我将所有可能的服务都实现此接口。在子组件中，我有一个输入：

export class SomeTestComponentComponent {

    @Input() fileService: FileService;

    download() {
        console.log(this.fileService);
        // this.fileService.download(...);
    }

}

现在在父组件中，我可以决定在此组件实例中应使用哪个服务：

<app-some-test-component [fileService]="fileServiceImpl" ></app-some-test-component>

此方法意味着您无需提供字符串来决定要使用哪个服务，而是决定服务本身。