Получение событий от родительского компонента внутри дочернего компонента, проецируемого через ng-content

Question

Рассмотрим эту упрощенную ситуацию, у нас есть:

Шаблон родительского компонента (селектор: 'родительский'):

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

Шаблон дочернего компонента (селектор: 'child'):

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

Использование где-нибудь на странице:

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

Я бы хотел справиться valueEmittedFromParentInputOnBlurEvent в моем childкомпонент после того, как он был испущен в событии onBlur(). Пожалуйста, помогите мне, если сможете:)

Answer 1

Вы можете использовать службу или предоставить вход для вашего дочернего компонента.

Answer 2

Следуйте этой концепции, чтобы общаться между родителем и ребенком:

1. В родительском компоненте html:

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

вы определяете свой дочерний компонент как #child для доступа к его методам, таким как onBlurEvent()

2. В вашем дочернем компоненте ts

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

3. В вашем дочернем компоненте html

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

когда событие onBlur происходит в вашем родительском элементе, он вызывает метод onBlurEvent в дочернем элементе, и метод будет делать все, что он должен делать

это был пример, который поможет вам понять общение родителей и детей, эта концепция поможет вам решить вашу проблему, удачи