Блог

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

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

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

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

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

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

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

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

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

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

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 в дочернем элементе, и метод будет делать все, что он должен делать

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