对@Output事件名称的建议是什么(以防止本机事件名称冲突)

Question

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

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

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

我在应用程序中间组件中使用了这个表单组件，它有自己的事件发射器，名称为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将被称为

• 当调用应用程序中间提交时(需要的行为(
• 提交表单时，因为本机事件冒泡到顶部("寄生"行为(

我想，"寄生"行为是基于DOM事件冒泡的。我可以通过submitButtonClicked处理程序中的event.stopPropagation((来停止它，但如果我忘记了停止它，我会得到非常糟糕的错误。

一般来说，我认为这种行为相当危险。如果我没有错的话，每个事件绑定表达式处理程序都可能被内部组件的本地事件"寄生"调用。if与任何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等等