Question

我玩过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组件：

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

Answer 1

我在@Output事件前面添加了我的组件名称，这似乎很有效，并提供一致且明确的约定，避免了您描述的问题。例如，假设我有一个名为的组件，例如TurnEditorComponent - @Output个活动可能会被命名为turnEditorChange，turnEditorFocus，turnEditorBlur等等。

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

1 个答案: