如何更改另一个组件属性的值？ （角度2）

Question

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

  <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 ...如何正确设置其值？

谢谢

Answer 1

您在ComponentB中应该做的是在关闭时引发一个事件。

@Output() onClose: EventEmitter<boolean> = new EventEmitter();


public closePopUp() {
    this.onClose.emit(true);
}

现在，父级只需订阅此事件：

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

Answer 2

您应该在componentBPopUp中使用@Output。

例如：

  close(){
    this.showPopup = false;
  }

您尝试执行的操作示例：

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

祝好运！！！

Answer 3

对于您的问题，父组件可以使用@ViewChild装饰器引用子组件。

@ViewChild('popup')
popup: ModalComponent;

this.popup.doStuff();

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

但是您可以通过componentBPopUp和showPopup字段之间的双向数据绑定来解决您的特定问题（请参阅此处 ）

另一个选择是使用EventEmmiter通知更改的其他组件（请参见此处 ）