javascript - 如何更改另一个组件属性的值？ ( Angular 2)

我有一个鬃毛页面，上面有一个按钮，该按钮会触发一个弹出框出现：

  <i class="material-icons" (click)="openPopUp()">info</i>

openPopUp（）只是将属性设置为true：

openPopUp() {
    this.showPopup = true;
  }

然后将showPopUp的值发送到PopupComponent（其单独的组件）：

<div *ngIf="showPopup === true">
  <pop-up-info-box [componentBPopUp]="showPopup"></pop-up-info-box>
</div>

但是现在在componenetB中，我具有从html触发的closePopUp函数：

关

并且只是将componentBPopUp设置为false：

 @Input
  public componentBPopUp: boolean;

  public closePopUp() {
    this.popUp = false;
  }

但是实际上需要设置为false的是第一个组件中的showPopup ...如何正确设置其值？

谢谢

最佳答案

您应该在componentBPopUp中使用@Output。

例如：

  close(){
    this.showPopup = false;
  }

您尝试执行的操作示例：

https://plnkr.co/edit/kUWrlnoXgJ15rXObdaqh?p=preview

祝好运！！！