web-dev-qa-db-ja.com

@Outputイベント名の推奨事項は何ですか（ネイティブイベント名の競合を防ぐため）？

私はAngular 2コンポーネントとそのコンポジションを試してみましたが、ネイティブイベントのバブリングと@Output名の衝突によって引き起こされる醜い動作に遭遇しました。

テンプレート内のフォームを持つコンポーネントapp-formがあります

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

このフォームコンポーネントをapp-middleコンポーネントで使用します。このコンポーネントには、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");
  }

}

テンプレート：

<div>

  <app-form></app-form>

</div>

そしてテンプレート付きのアプリコンポーネント：

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

これで、submitListenerが呼び出されます

  • app-middleでsubmitが呼び出されたとき（必要な動作）
  • フォームが送信されたとき、ネイティブイベントバブルが上部に表示されるため（「寄生」動作）

「寄生的」な振る舞いは、DOMイベントのバブリングに基づいていると思います。 submitButtonClickedハンドラーのevent.stopPropagation（）で停止できますが、停止を忘れると、かなり醜いエラーが発生します。

一般に、私はこの動作を非常に危険だと考えています。私が間違っていなければ、すべてのイベントバインディング式ハンドラーは、内部コンポーネントからのネイティブイベントによって「寄生的に」呼び出される可能性があります。 DOMイベントのいずれかと同じ名前の場合（ https://developer.mozilla.org/en-US/docs/Web/Events ）そして、上位互換性については触れません...

ここで見ることができる同じ問題： https://bitbucket.org/winsik/submit-event-issue/src

この問題に遭遇しましたか？ @出力にどのような名前を付けますか？

angularangular2-components
20
milanlempera

接頭辞@Output私のコンポーネントの名前が付いたイベント。これは非常にうまく機能しているようで、説明した問題を回避する一貫した明確な規則を提供します。たとえば、次のようなコンポーネントがあるとします。 TurnEditorComponent-@Outputイベントには、turnEditorChange、turnEditorFocus、turnEditorBlurなどの名前が付けられます。

10
simon