javascript - Using Output() and EventEmitter() to Pass Value in Angular App - Stack Overflow

admin管理员组

文章数量:1415684

Last week I managed to get Output() and EventEmitter() working in my Angular app. But today I'm running into a problem in trying to implement this in another scenario. Not sure what I'm missing.

First off, in a sub-ponent that handles filters that are applied to a list of records I have this:

@Output() sendFilter = new EventEmitter();

optionClicked(option) {
    this.sendFilter.emit(option);
    console.log('Filter from filters p is: ' + option.toolbarLabel);
    this.option = option;
}

The view for this filter ponent looks like this:

<md-checkbox *ngFor="let option of categoryFilters.options" 
   [(ngModel)]="option.value" (click)="optionClicked(option)">
   {{option.label}}
</md-checkbox>

So I am using "sendFilter" to emit "option". Then, in my other ponent, I assume this value should be received/pass into this function:

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

In the view for this ponent I have this:

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

However, only the event on the filter ponent logs to the console. The console.log I have right above here never happens. Shouldn't that "optionReceived()" function trigger automatically upon a new emit from the filter ponent?

I even tried adding "optionClicked(option)" to Angular's OnChanges life cycle hook:

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

... But still nothing logs to the console from that ponent.

What am I missing here?

Last week I managed to get Output() and EventEmitter() working in my Angular app. But today I'm running into a problem in trying to implement this in another scenario. Not sure what I'm missing.

First off, in a sub-ponent that handles filters that are applied to a list of records I have this:

@Output() sendFilter = new EventEmitter();

optionClicked(option) {
    this.sendFilter.emit(option);
    console.log('Filter from filters p is: ' + option.toolbarLabel);
    this.option = option;
}

The view for this filter ponent looks like this:

<md-checkbox *ngFor="let option of categoryFilters.options" 
   [(ngModel)]="option.value" (click)="optionClicked(option)">
   {{option.label}}
</md-checkbox>

So I am using "sendFilter" to emit "option". Then, in my other ponent, I assume this value should be received/pass into this function:

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

In the view for this ponent I have this:

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

However, only the event on the filter ponent logs to the console. The console.log I have right above here never happens. Shouldn't that "optionReceived()" function trigger automatically upon a new emit from the filter ponent?

I even tried adding "optionClicked(option)" to Angular's OnChanges life cycle hook:

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

... But still nothing logs to the console from that ponent.

What am I missing here?

• javascript
• angular
• eventemitter

Share Improve this question Follow edited Apr 17, 2017 at 21:40 Muirik asked Apr 17, 2017 at 21:23 MuirikMuirik 6,2991010 gold badges6969 silver badges132132 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Assuming that your checkbox is inside the sub-ponent and you should be using as below

Mistake 1:

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

Mistake 2:

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

Implementing this method in yourparent ponent as

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

本文标签： javascriptUsing Output() and EventEmitter() to Pass Value in Angular AppStack Overflow