什么是@Output事件名称的推荐(以防止本机事件名称冲突)？

Question

我玩过Angular 2组件及其组合,我遇到了丑陋的行为,这是由本机事件冒泡和@Output名称冲突引起的.

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

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

我在app-middle组件中使用此表单组件,该组件具有名称提交的自己的事件发射器.

@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组件:

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

现在,将调用submitListener

• 在app-middle上提交时被调用(通缉行为)
• 提交表单时,因为本机事件冒泡到顶部("寄生"行为)

我想,"寄生"行为是基于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等等.