Блог

Мне нужно передавать данные от дочернего элемента к родительскому, но при изменении.

Код дочернего компонента:

   <input type="file" name="file" accept="image/*"
        (change)="handleInputChange($event)">
  

Родительский компонент:

  <app-file-uploader></app-file-uploader>  //this is child component
  

Мне нужно передать ($event) родительскому компоненту.

Вам нужно использовать Output() директиву Angular. Вот как это делается:

Во-первых: в вашем дочернем компоненте добавьте следующую инструкцию import:

 import { Output } from '@angular/core';
  

Второе: в классе дочернего компонента: добавьте следующее свойство:

 @Output() onChange = new EventEmitter<any>();
  

Теперь в вашем handleInputChange($event) , вам нужно передать свойство onChange:

 handleInputChange($event){
    // ... all of your logic
    this.onChange.emit($event); // this will pass the $event object to the parent component.
}
  

Наконец: в вашем шаблоне родительского компонента вы можете вызвать свой компонент следующим образом:

 <app-file-uploader (onChange)="callSomeFunction($event)"></app-file-uploader>
  

Примечание: callSomeFunction замените любой функцией, которую вы вызываете.

Вот документация Angular о том, как использовать Output(). Надеюсь, этот ответ поможет вам!