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

Question

我有一个mane页面，其中有一个触发弹出框的按钮：

  <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>

但现在在componentsnetB中我有从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 decorator

引用子组件

@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字段之间的双向数据绑定来解决（参见here）

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