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

とアプリのコンポーネント：アプリ-真ん中に提出したときに今、submitListenerは

• と呼ばれる

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

  が（と呼ばれています欲しい行動）

0123フォームが送信されたときにトップにネイティブイベントバブル（「寄生」行動）私が思う

は、「寄生」行動はDOMイベントに基づいているため

は、バブリング。 submitButtonClickedハンドラでevent.stopPropagation（）を停止することはできますが、停止するのを忘れてしまった場合、かなり醜いエラーになります。

一般に、この動作は非常に危険です。私が間違っていない場合、すべてのイベントバインディング式ハンドラは、内部コンポーネントからのネイティブイベントによって「寄生的に」呼び出される可能性があります。 場合は、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などとすることができます。