Angular 2/4 click event in child show component in parent

Question

我真的很难让它工作，并且花了很多时间在看似简单的实现上。

我有一个带有两个子组件的父（引用结果）组件：

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

我在子 'quote-table' 组件中有一个带有点击事件的按钮：

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

并且在这个子 'quote-form' 组件和 @Output():

中有一个点击事件函数

@Output() showCallBackPopUp;

showCallbackToggle() {
  this.showCallBackPopUp = true;
}

我在父（引用结果）组件中也有一个@Input()：

 @Input() showCallBack: boolean;

我希望call-back-pop-up组件显示在'quote-table'

中触发的点击事件上

我曾尝试使用布尔值和发射器切换@Input 和@Output，但没有成功。

我哪里做错了，我怎样才能让它发挥作用？

Answer 1

您的 child 组件需要发出它的输出事件并且 parent 需要绑定到它。

这是 child 发出事件的方式：

@Output() showCallBackPopUp = new EventEmitter();

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

输出始终是事件发射器，它们通过发射方法发射值。

然后 parent 像这样在模板中绑定到它：

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

然后你就完成了。 () 语法是标准的 Angular 事件绑定语法，就像您绑定到按钮作为正常 HTML5 api 的一部分发出的单击事件一样。如果你没有给@Output() 参数，那么事件名称将是变量名称（在本例中为 "showCallBackPopUp"），但你也可以做一些像 @Output('customEventName') 这样的事情，这会改变事件名称为您输入的任何字符串。因此您的绑定将改为 (customEventName)="...do whatever.."

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

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

如果您希望 child 能够发出 true 或 false 并让您的 parent 做出相应反应。

Angular 2/4 click event in child show component in parent

Angular 2/4 click event in child show component in parent

angular-ng-if

angular