如何解决如何将回调函数传递给子组件?
我正在编写一个 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 ...");
}
console.log 永远不会被打印,而且该函数似乎根本没有被调用。我还需要做什么才能调用回调?
解决方法
就像@MikeOne 提到的,你需要实际调用回调:
(change)="valueChangeCallback($event)"
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。