Question

我真的很难让这项工作变得有效，并且已经花了很长时间才能实现看似简单的实施。

我有一个包含两个子组件的父（quote-results）组件：

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

我有一个带有点击事件的按钮，其中包含了一个点击事件＆＃39; quote-table＆＃39;成分：

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

并且具有此子项点击事件的功能＆＃39; quote-form＆＃39;组件和@Output（）：

@Output() showCallBackPopUp;

showCallbackToggle() {
  this.showCallBackPopUp = true;
}

我在父（quote-results）组件中也有一个@Input（）：

 @Input() showCallBack: boolean;

我希望将回拨弹出组件显示在触发内部的点击事件中＆＃39; quote-table＆＃39;

我已经尝试使用布尔为此和发射器切换@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'）那样做一些事情，它会将事件名称改为你输入的字符串。所以你的绑定应该是（customEventName）=“......做任何事情......”

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

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

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

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

1 个答案: