Events 在angular2中，当父图像更改时，如何更改子图像？

例如，我们有两个图像，一个在父组件中，另一个在子组件中。单击子映像可以对父映像进行更改，易于实现。但是，当单击“父映像”时，如何更改子映像？

您的插件无法工作，因此很难找出您的具体问题所在。但一般情况并不难

如果要在单击子对象时更改父对象，只需在子对象上使用

输出。例如，单击此处的子对象可替换父对象（）中的图像

import{Component，Output，EventEmitter}来自'angular2/core'
@组成部分({
选择器：“儿童”；
模板：`
子映像：
`
})
导出类子组件{
@单击了输出（）：EventEmitter=new EventEmitter（）；
uri:字符串=”https://upload.wikimedia.org/wikipedia/commons/e/e5/ццццц-ццц28100%29.PNG”
（e）{
日志（“收到的子组件单击”）
this.wasClicked.emit（e）
}
}
@组成部分({
选择器：“父级”；
模板：`
父映像：
`,
指令：[子组件]
})
导出类parentComponent{
开关：布尔=假；
uri:字符串=”https://upload.wikimedia.org/wikipedia/commons/1/14/аааааааааа28100%29.png”
儿童（e）{
console.log（“父节点从子节点接收到单击事件”）
这个开关
？this.uri=”https://upload.wikimedia.org/wikipedia/commons/1/14/аааааааааа28100%29.png”
：this.uri=”https://upload.wikimedia.org/wikipedia/commons/7/7a/цццЛцц-28100%29.PNG”
this.switch=！this.switch
}
}
我想有几种方法可以做到这一点：


在子组件中创建自定义事件（使用
@Output
），并触发事件以通知父组件。有关更多详细信息，请参阅此链接：
将父组件实例注入子组件实例。从子组件中，直接更新父组件中用于图像的属性。有关更多详细信息，请参阅此答案：
使用带有EventEmitter属性的共享服务使父组件和子组件通信。有关更多详细信息，请参阅此链接：

单击父映像时如何更改子映像

通常，当家长想要与孩子交流某件事时，请使用“子输入”属性。如果要执行某些逻辑，请实现
ngOnChanges（）
，以便在输入属性更改时收到通知：

ngOnChanges(changes) {
  console.log(changes);
}

当输入属性
playBtnStatus
更改时，我假设您希望在PauseBtnComponent中执行某些操作：

ngOnChanges(changes) {
  console.log(changes);
  if(changes.playBtnStatus.currentValue) { ... }
  else { ... }
}



另一个选项是使用或在父组件中获取对子组件（ren）的引用。然后您可以对孩子调用public方法。
谢谢Thierry。对不起，我问错了。我知道在使用输出单击子图像时如何更改父图像。我的问题实际上是：单击父映像时如何更改子映像？我尝试过使用输出，但没有成功。我认为@Query可以帮助您从父组件引用子映像。通过这种方式，您可以在单击父项时对其进行更新。有关更多详细信息，请参阅此链接：谢谢。我对代码做了一点修改，以更改子图像，但它不会出错。ngOnChanges（changes）{console.log（changes.playBtnStatus.currentValue）this.pauseEnabledImg=this.pauseEnabledImg；}@J.Fun，您的评论没有意义：
this.pauseEnabledImg=this.pauseEnabledImg。您需要检查
changes.playBtnStatus.currentValue的值，并根据该值有条件地更改图像。对不起，我不是很清楚。我假设在鼠标单击父映像后，它的状态应该从enable更改为disable，然后它将调用onChange函数并让子映像启用。然而，它并没有像我预期的那样工作。你能给我看看那辆车吗？（父映像和子映像的状态总是相反的，因此一个映像可以触发另一个映像的状态，反之亦然）@J.Fun，我更新了plunker以包含
if（！changes.playBtnStatus.currentValue）{this.currentPauseImg=this.pauseEnabledImg；}
。看看这是不是你需要的。
ngOnChanges(changes) {
  console.log(changes);
  if(changes.playBtnStatus.currentValue) { ... }
  else { ... }
}