使用 Output() 和 EventEmitter() 在 Angular App 中传递值

Question

上周我设法让 Output() 和 EventEmitter() 在我的 Angular 应用程序中工作。但是今天我运行在尝试在另一个场景中实现它时遇到了问题。不知道我错过了什么。

首先，在处理应用于记录列表的过滤器的子组件中，我有这个：

@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>

所以我使用 "sendFilter" 来发出 "option"。然后，在我的其他组件中，我假设这个值应该是 received/pass 到这个函数中：

optionReceived(option) {
    console.log('Consulting: ' + option.toolbarLabel);
}

在这个组件的视图中我有这个：

<list-display [records]="records" (sendChange)="pageChange($event)" (sendFilter)="optionReceived(option)"></list-display>

但是，只有过滤器组件上的事件会记录到控制台。 console.log 我在上面的 console.log 从来没有发生过。 "optionReceived()" 函数不应该在过滤器组件发出新的信号时自动触发吗？

我什至尝试将 "optionClicked(option)" 添加到 Angular 的 OnChanges 生命周期挂钩中：

ngOnChanges(option) {
    this.optionReceived(option.toolbarLabel);
}

...但是仍然没有任何内容从该组件记录到控制台。

我在这里错过了什么？

Answer 1

假设您的复选框在子组件内，您应该按如下方式使用

错误一：

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

错误 2：

<sub-component (sendFilter)="optionReceived($event)"> </sub-component>

在你的父组件中实现这个方法作为

optionReceived(option:any){
        console.log('Consulting: ' + option.toolbarLabel);
}

使用 Output() 和 EventEmitter() 在 Angular App 中传递值

Using Output() and EventEmitter() to Pass Value in Angular App

javascript

eventemitter

angular