Как мне передать функцию обратного вызова дочернему компоненту?

#angular #callback #parent-child #onchange #angular9

#angular #обратный вызов #родитель-потомок #onchange #angular9

Вопрос:

Я пишу приложение Angular 9, и у меня есть этот общий компонент для создания меню выбора…

 export class SharedMenuComponent implements OnInit {

  items: Item[] = [];
  // Represents what is selected by default
  @Input('default_selected') default_selected: number;
  @Input('value_change_callback') valueChangeCallback: any;

  constructor(
    private route: ActivatedRoute,
    private apiService: ApiService
  ) {}

  ngOnInit(): void {
    this.items = this.route.snapshot.data.items;
  }

}
 

HTML выглядит так

 <select id="item" (change)="valueChangeCallback">
    <option *ngFor="let item of items"
        [selected]="item.id === default_selected">{{item.path}}</option>
</select>
 

Я замечаю, что обратный вызов «onChange» не вызывается, когда кто-то выбирает другой элемент из меню. В родительском компоненте я вызываю дочерний компонент следующим образом

 <form id="statForm" method="get">
    <app-item-menu [default_selected]="itemId"
                        [value_change_callback]="onNavigate"></app-item-menu>
</form>
 

Я определяю эту функцию в родительском компоненте

   onNavigate(event): void {
    console.log("called on change ...");
  }
 

Консоль.журнал никогда не печатается, и функция, похоже, вообще не вызывается. Что еще мне нужно сделать, чтобы вызвать обратный вызов?

Комментарии:

1. Похоже, вы на самом деле не вызываете функцию в (change) ..?

Ответ №1:

Как упоминал @MikeOne, вам нужно фактически вызвать обратный вызов:

 (change)="valueChangeCallback($event)"