angular2中，当父图发生变化时，如何使子图发生变化？

Question

例如，我们有两张图片，一张在父组件中，另一张在子组件中。单击子图像可以使父图像发生变化，易于实现。但是单击父图像时如何更改子图像？

Answer 1

我会看到几种方法来做到这一点：

• 在子组件中创建一个自定义事件（使用@Output）并触发该事件以通知父组件。有关详细信息，请参阅此链接：`Error: Output is not defined` when passing value outside a directive to parent directive
• 将父组件实例注入到子组件中。从子组件中，直接更新父组件中用于图像的属性。有关详细信息，请参阅此答案：Angular2 Exception: No provider for Service
• 使用具有 EventEmitter 属性的共享服务来使父组件和子组件通信。有关详细信息，请参阅此链接：Delegation: EventEmitter or Observable in Angular2

Answer 2

您的 plunker 无法正常工作，因此很难确定您的具体问题出在哪里。但一般情况并不太难。

如果您想在单击子项时更改父项，只需在子项上使用output。例如 - 在此处单击子级会交替显示父级中的图像 (working plunk)

import {Component, Output, EventEmitter} from 'angular2/core'


@Component({
  selector: "child";
  template:`
    <div>
     <h3>  Child Image: </h3>
      <img src="{{uri}}" (click)="imageClicked($event)" />
      </div>
  `
})
export class childComponent {
  @Output() wasClicked: EventEmitter<Node> = new EventEmitter();
  uri: string = "https://upload.wikimedia.org/wikipedia/commons/e/e5/Элемент_И-НЕ_%28100%29.PNG"

  imageClicked(e) {
    console.log("child component recieved click" )
    this.wasClicked.emit(e)
  }
}

@Component({
  selector: "parent";
  template:`
    <div>
      <h2> Parent Image: </h2>
      <img src="{{uri}}" />
     </div>
    <child (wasClicked)="childClicked(e)"></child>
  `,
  directives: [childComponent]
})
export class parentComponent {
  switch: boolean = false;
  uri: string = "https://upload.wikimedia.org/wikipedia/commons/1/14/Элемент_Исключающее_ИЛИ_%28100%29.png"

  childClicked(e){
    console.log("parent recieved click event from child")
    this.switch
    ? 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

  }
}

Answer 3

点击父图时如何改变子图？

一般来说，当父母想要与孩子交流某些内容时，请使用子输入属性。如果要执行一些逻辑，请实现ngOnChanges()，以便在输入属性更改时收到通知：

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

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

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

Plunker

---

另一种选择是在父组件中使用@ViewChild、@ViewChildren 或@Query 来获取对子组件（ren）的引用。然后你可以调用孩子的公共方法。