Question

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

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

和awesome-contrib-component提供商：

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

据我所知，即使我在app引导程序级别提供FooProvider，或者甚至在my-component（提供者或viewProviders）上提供awesome-contrib-component，因为my-component指定了它{39}自己的提供者，它总是得到它自己的实例。

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

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

这里要强调的重要一点是，FooProvider是来自Github的第三方模块，它定义了它自己的提供者，并将{"model"=>{"photo"=>"data:image/jpeg;base64,/9j..}作为私有变量分配给自己，并且没有＃39}。暴露它。

如果有人使用这个第三方库而不是打开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

访问Angular2中的子组件提供程序

2 个答案: