Consider this component:
@Component({
selector: 'hero-detail',
inputs: ['hero'],
outputs: ['deleted'],
template: `
<div>
<b>Hero Detail: {{hero?.fullName}}</b>
<button (click)="onDelete()">Delete</button>
</div>
`
})
class HeroDetailComponent {
@Input()
hero: Hero;
@Output()
deleted = new EventEmitter();
onDelete() {
this.deleted.next(this.hero);
}
}
Now we bind to it:
<hero-detail [hero]="currentHero" (deleted)="onDeleted($event)"></hero-detail>
When the user clicks the Delete button inside <hero-detail>, the parent's onDeleted method is called twice.
Remove either the [outputs] array or the @Output decoration and the parent's method is called only once.
The number of parent method calls increase by one for each additional @Output decoration.
I maintain that any number of mentions as an output > 1 should still mean a single call to the parent method.
Consider this component:
Now we bind to it:
When the user clicks the Delete button inside
<hero-detail>, the parent'sonDeletedmethod is called twice.Remove either the
[outputs]array or the@Outputdecoration and the parent's method is called only once.The number of parent method calls increase by one for each additional
@Outputdecoration.I maintain that any number of mentions as an output > 1 should still mean a single call to the parent method.