Что такое рекомендации для имен событий @Output (чтобы предотвратить столкновение имени родного события)?

Question

Я играл с компонентами Angular 2 и их композициями, и я столкнулся с уродливым поведением, которое вызвано барботированием родных событий и конфликтом имени @Output.

У меня есть компонент приложение-форма с формой в шаблоне

<form (ngSubmit)="submitButtonClicked($event)"> 
    <input type="text"/> 
    <button type="submit">Send</button> 
</form> 

Я использую этот компонент формы в приложении среднего компонента, который имеет собственный излучатель событий с именем представить.

@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"); 
    } 

} 

шаблона:

<div> 

    <app-form></app-form> 

</div> 

И приложение компонент с шаблоном:

<app-middle (submit)="submitListener($event)"></app-middle> 

Теперь submitListener будет называться

• когда подают на приложение-середине называется (желаемое поведение)
• , когда форма была отправлена, потому что родной пузырьковой событие к началу («паразитный» поведение)

Я полагаю, «паразитируют» поведение основывается на DOM события пузыриться. Я могу остановить его event.stopPropagation() в обработчике submitButtonClicked, но если я забуду, остановите его, я получаю довольно уродливые ошибки.

В целом, я считаю это поведение весьма опасным. Если я не ошибаюсь, каждый связанный с событиями обработчик выражений может быть потенциально назван «паразитически» родным событием из внутренних компонентов. если имеет то же имя, как и любой из DOM событий (https://developer.mozilla.org/en-US/docs/Web/Events), и я не говорю о прямой совместимости ....

То же проблема, которую вы можете увидеть здесь: https://bitbucket.org/winsik/submit-event-issue/src

Вы столкнулись с этой проблемой? Как вы называете свои @Outputs?

Answer 1

Я префикс @Output событий с именем моих компонентов, который, кажется, работает очень хорошо и обеспечивает последовательное и четкое соглашение, которое позволяет избежать проблем, которые вы описываете. Например, предположим, что у меня есть компонент с именем, например. TurnEditorComponent - @Output события могут называться turnEditorChange, turnEditorFocus, turnEditorBlur и так далее.