如何将回调函数传递给子组件？

Question

我正在编写一个 Angular 9 应用程序，我有这个共享组件来生成 select 菜单 ...

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>

我注意到当有人 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 ...");
  }

console.log 永远不会被打印出来，而且这个函数看起来根本就没有被调用过。我还需要做什么才能调用回调？

Answer 1

就像@MikeOne 提到的那样，您需要实际调用回调：

(change)="valueChangeCallback($event)"

如何将回调函数传递给子组件？

How do I pass a callback function to a child component?

onchange

callback

parent-child

angular

angular9