gpt4 book ai didi

angular - @Output 事件名称的建议是什么(以防止 native 事件名称冲突)?

转载 作者:太空狗 更新时间:2023-10-29 16:56:37 24 4
gpt4 key购买 nike

<分区>

我玩过 Angular 2 组件及其组合,但遇到了丑陋的行为,这是由 native 事件冒泡和@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

  • 调用应用程序中间提交时(需要的行为)
  • 提交表单时,因为原生事件冒泡到顶部(“寄生”行为)

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

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

您可以在此处看到同样的问题:https://bitbucket.org/winsik/submit-event-issue/src

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

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com