有没有办法将服务从父组件注入到组件中？

Question

所以我有一个表格组件。但是表组件需要使用适当的 API 服务，具体取决于它是由 ComponentA 还是 ComponentB 调用。

例如，如果 ComponentB 使用 TableComponent，那么它需要让 TableComponent 注入 APIForB 服务并使用它来填充表。

角度新手，所以不确定这样的事情是否可能。

Answer 1

Angular的 DI 系统是分层的，这意味着：

服务是注入器范围内的单例

每当 Angular 创建providers在其@Component装饰器中定义的组件实例时，它都会使用自己的服务实例创建嵌套注入器。

对于您来说，这意味着您可以为组件提供不同的服务实现，这些服务实现必须扩展相同的抽象类，然后将抽象类注入到您的TableComponent：

API服务：

export abstract class APIService{
  yourMethod1:() => void ;
  ...
}

您必须将基类定义为抽象类而不是接口，因为接口在运行时不存在，因此它们不是有效的 DI 令牌。

APIforAService/APIforBService：

@Injectable()
export class APIforAService implements APIService{
  youMethod1Implementation(){...}
  ....
}

当然，您可以对 进行相同的操作，APIforBService但实现方式不同。

表格组件

现在TableComponent您可以注入APIService但不定义提供者！

@Component({
  selector: 'your-selector',
  templateUrl: '',
  providers: []
})
export class TableComponent {
  constructor(private apiService: APIService) {
  }
}

组件A/B

现在在 ComponentA 和 ComponentB 中定义适当的提供者：

@Component({
  selector: 'componentA',
  templateUrl: '',
  providers: [{
    provide:APIService,
    useClass:APIforAService
  }]
})
export class ComponentA {
  
}

在这里，您也可以对ComponentB和 use执行相同的操作APIforBService。

由于分层 DI 系统，如果从 实例化和从 实例化，您TableComponent会得到APIforAServiceComponentAAPIforBServiceComponentB