父级中子节目组件中的Angular 2/4单击事件

Question

我真的很努力让这个工作,并花了很长时间看似简单的实现.

我有一个父(quote-results)组件,有两个子组件:

<quote-table></quote-table>
<call-back-pop-up *ngIf="showCallBackPopUp"></call-back-pop-up>

我在子'quote-table'组件中有一个带有click事件的按钮:

<button class="button-secondary" (click)="showCallbackToggle()">Request a callback</button>

并为此子项'quote-form'组件中的click事件和@Output()提供了一个函数:

@Output() showCallBackPopUp;

showCallbackToggle() {
  this.showCallBackPopUp = true;
}

我在父(quote-results)组件中也有一个@Input():

 @Input() showCallBack: boolean;

我希望在'quote-table'中触发的click事件上显示call-back-pop-up组件

我已经尝试使用布尔为此和发射器切换@Input和@Output,但没有运气.

我做错了什么,我怎么能让它发挥作用？

Answer 1

您的子组件需要发出它的输出事件,父组件需要绑定它.

这就是孩子发出事件的方式:

@Output() showCallBackPopUp = new EventEmitter();

showCallbackToggle() {
  this.showCallBackPopUp.emit(true);
}

输出始终是事件发射器,它们通过其emit方法发出值.

然后父类在模板中绑定它,如下所示:

<quote-table (showCallBackPopUp)="showCallBackPopUp = true"></quote-table>

然后你就完蛋了.()语法是stdard Angular事件绑定语法,就像绑定到按钮作为普通HTML5 api的一部分发出的click事件一样.如果你没有给@Output()提供任何参数,那么事件名称将是变量名称(在本例中为"showCallBackPopUp"),但是你也可以像@Output('customEventName')这样做,这会将事件名称改为你输入的字符串.所以你的绑定wold而不是(customEventName)="......做任何事......"

您还可以在模板中获取使用$ event关键字发出的值,如:

<quote-table (showCallBackPopUp)="showCallBackPopUp = $event"></quote-table>

如果您希望您的孩子能够发出真或假,并让您的父母做出相应的反应.