上周我设法让我的Angular应用程序中的Output()和EventEmitter()工作。但是今天我在尝试在另一个场景中实现这个问题时遇到了问题。不知道我错过了什么。
首先,在处理应用于记录列表的过滤器的子组件中,我有这个:
@Output() sendFilter = new EventEmitter();
optionClicked(option) {
this.sendFilter.emit(option);
console.log('Filter from filters comp is: ' + option.toolbarLabel);
this.option = option;
}
此过滤器组件的视图如下所示:
<md-checkbox *ngFor="let option of categoryFilters.options"
[(ngModel)]="option.value" (click)="optionClicked(option)">
{{option.label}}
</md-checkbox>
所以我正在使用&#34; sendFilter&#34;发出&#34;选项&#34;。然后,在我的其他组件中,我假设应该接收/传递此值:
optionReceived(option) {
console.log('Consulting: ' + option.toolbarLabel);
}
在这个组件的视图中,我有这个:
<list-display [records]="records" (sendChange)="pageChange($event)" (sendFilter)="optionReceived(option)"></list-display>
但是,只有过滤器组件上的事件才会记录到控制台。我在这里的console.log从未发生过。不应该&#34; optionReceived()&#34;函数在过滤器组件的新发出时自动触发?
我甚至尝试添加&#34; optionClicked(选项)&#34;到Angular的OnChanges生命周期钩子:
ngOnChanges(option) {
this.optionReceived(option.toolbarLabel);
}
...但是仍然没有任何内容从该组件登录到控制台。
我在这里缺少什么?
答案 0 :(得分:3)
假设您的复选框位于子组件内,您应该按以下方式使用
错误1:
@Output() sendFilter = new EventEmitter<any>();
错误2:
<sub-component (sendFilter)="optionReceived($event)"> </sub-component>
在您的父组件中实现此方法
optionReceived(option:any){
console.log('Consulting: ' + option.toolbarLabel);
}