从通过 ng-content 投影的子组件内的父组件接收事件答案

【问题标题】：Receiving events from parent component inside child component projected via ng-content从通过 ng-content 投影的子组件内的父组件接收事件
【发布时间】：2021-03-14 09:11:47
【问题描述】：

考虑这种简化的情况，我们有：

父组件模板（选择器：'parent'）：

<div class="wrapper">
  <input (blur)="onBlur()"/>
  <ng-content></ng-content>
</div>

子组件模板（选择器：'child'）：

<div>{{ valueEmittedFromParentInputOnBlurEvent }}</div>

用法，页面某处：

<parent>
  <child></child>
</parent>

我想在我的 child 组件中处理 valueEmittedFromParentInputOnBlurEvent 在 onBlur() 事件中发出后。如果可以的话，请帮助我:)

【问题讨论】：

标签： angular angular-content-projection

【解决方案1】：

遵循这个概念在父母和孩子之间进行沟通：

在您的 html 父组件中：

<child #child></child>
<input (blur)="child.onBlurEvent()"/>

您将子组件定义为 #child 以访问其方法，例如 onBlurEvent()

在您的 ts 子组件中

number = 0;
onBlurMethod() {
    this.number++;
}

在您的 html 子组件中

<h1>{{number}}</h1>

当你的父母发生 onBlur 事件时，它会在孩子中调用 onBlurEvent 方法，该方法将做它必须做的任何事情

这是一个帮助你理解亲子沟通的例子，这个概念将帮助你解决你的问题，祝你好运

【讨论】：

谢谢，但这不适用于 ng-content。我现在不能参考 onBlurEvent() 未知的方法 child :( 我的意思是这个 ``` ``` 不起作用。

【解决方案2】：

您可以使用服务或为您的子组件提供输入。

【讨论】：

是的，但我不想在直接关系中使用它，我怀疑应该有一个更简单的方法，我目前不知道）