Hello,
I have played with Angular 2 components and their compositions and I have
run into ugly behavior, which is caused by native event bubbling and
@Output name collision.
I have component app-form with form in template
<form (ngSubmit)="submitButtonClicked($event)">
<input type="text"/>
<button type="submit">Send</button>
</form>
I use this form component in app-middle component, which has own event emiter
with name submit.
@Component({
selector: 'app-middle',
templateUrl: './middle.component.html',
styleUrls: ['./middle.component.css']
})
export class MiddleComponent implements OnInit {
@Output() submit = new EventEmitter<string>();
constructor() { }
emitSubmitEvent() {
this.submit.emit("some data");
}
}
template:
<div>
<app-form></app-form>
</div>
And app component with template:
<app-middle (submit)="submitListener($event)"></app-middle>
Now, submitListener will be called
- when submit on app-middle is called (wanted behavior)
- when form is submitted, because native event buble to the top ("parasitic"
behavior)
I supose, "parasitic" behavior is based on DOM event bubling.
I can stop it by event.stopPropagation() in submitButtonClicked handler, but if
i forgot stop it, i get pretty ugly errors.
Generally I consider this behavior quite dangerous. If I am not wrong, every
event binding expression hander can be potentialy called "parasiticly" by
native event from inner components.
if has same name as any of DOM events
(https://developer.mozilla.org/en-US/docs/Web/Events) And I don't talk about
forward compatibility....
Same problem you can see here:
https://bitbucket.org/winsik/submit-event-issue/src
Did you run into this problem? How do you name your @Outputs?
--
You received this message because you are subscribed to the Google Groups
"Angular" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
