在 Angular2 中访问子组件的提供者

Question

假设我有一个组件，它使用来自 Github 的第 3 方组件，它定义了它自己的提供程序。

<my-component>
    <awesome-contrib-component></awesome-contrib-component>
</my-component>

对于awesome-contrib-component 提供者：

@Component({
    selector: 'awesome-contrib-component',
    providers: [FooProvider]
})

据我所知，即使我在应用程序引导级别提供FooProvider，甚至在my-component（使用提供程序或视图提供程序），因为awesome-contrib-component 指定它自己的提供程序，它总是得到它自己的实例。

问题在于，在my-component 中，我需要访问FooProvider 的相同 实例，该实例由awesome-contrib-component 使用，但我无法获得它。

这可能吗？我错过了什么吗？谢谢！

这里要强调的重要一点是，awesome-contrib-component 是来自 Github 的第 3 方模块，它定义了自己的提供程序，并将 FooProvider 作为私有变量分配给自己，并且不会公开它。

作为一个使用这个第 3 方库但没有打开 PR（我做过）的人，我不确定如何解决这个问题。

Answer 1

使用@ViewChild，或者如果你有多个孩子使用@Children，像这样

@Component({
    selector: 'my-component',
    directives: [AwesomeContribComponent]
})
export class MyComponent{
  @ViewChild(AwesomeContribComponent) public childInstance: AwesomeContribComponent

  ngAfterViewInit(){
     console.log(this.childInstance.fooProvider); // you got the service
  }

}

@Component({
    selector: 'awesome-contrib-component',
    providers: [FooProvider]
})
export class AwesomeContribComponent {
  constructor(public fooProvider: FooProvider){}
}

Answer 2

你肯定错过了什么，是的！ :)

因此，如果您希望在子组件和父组件中使用相同的提供程序实例，那么您只需在父组件中提供它（不在子组件中），在子组件中您只需使用它（不提供），这样您就可以拥有同一个例子。

更多关于提供者/依赖注入/服务：https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html