@Output 事件名称的建议是什么（以防止本机事件名称冲突）？ [关闭]答案

【问题标题】：What are recommanditions for @Output event names (to prevent native event name collision)? [closed]@Output 事件名称的建议是什么（以防止本机事件名称冲突）？ [关闭]
【发布时间】：2017-03-09 15:40:48
【问题描述】：

我使用过 Angular 2 组件及其组合，但我遇到了丑陋的行为，这是由原生事件冒泡和 @Output 名称冲突引起的。

我有组件应用程序表单，模板中有表单

<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 上的提交时（想要的行为）
提交表单时，由于原生事件冒泡到顶部（“寄生”行为）

我想，“寄生”行为是基于 DOM 事件冒泡。我可以通过 submitButtonClicked 处理程序中的 event.stopPropagation() 停止它，但如果我忘记停止它，我会收到非常丑陋的错误。

一般来说，我认为这种行为非常危险。如果我没记错的话，每个事件绑定表达式处理程序都可能被内部组件的本机事件“寄生”地调用。 if 与任何 DOM 事件同名 (https://developer.mozilla.org/en-US/docs/Web/Events) 而且我不谈论前向兼容性....

你可以在这里看到同样的问题：https://bitbucket.org/winsik/submit-event-issue/src

您遇到过这个问题吗？你如何命名你的@Outputs？

【问题讨论】：

我通常会为@Output (onXxxxx) 的自定义事件命名。比如 onSubmit、onClick、onWhatever。
这违反了角度风格指南angular.io/styleguide#!#05-16
谢谢，也许我会将其报告为 stylequide 问题，因为遵守此规则存在潜在危险。
您和未来的读者可能会对这个角度问题感兴趣：github.com/angular/angular/issues/13997
应该注意，角度问题现在链接回这个 stackoverflow 问题。

标签： angular angular2-components

【解决方案1】：

我在 @Output 事件前加上我的组件名称，这似乎工作得很好，并提供了一个一致且清晰的约定，避免了您描述的问题。例如，假设我有一个名为的组件，例如TurnEditorComponent -- @Output 事件可能被命名为 turnEditorChange、turnEditorFocus、turnEditorBlur 等等。

【讨论】：

我一直在寻找这个命名问题的解决方案，我真的很喜欢这个
只需在所有事件前加上“by”，例如“byClick”（表示事件导致by Clicking 某些东西，这是人类可读的，例如：(byClick)="doSomething()")。此外（您可能已经使用了这个），在所有侦听器前加上“on”，例如“onClick”，非常自我解释：onClick() { doSomething(); } 或 (byClick)="onClick()"（顺便说一句，lint 可能禁止on作为@Output前缀）