什么是@Output事件名的重命令(以防止本机事件名冲突)？
提问于 2016-10-26 20:56:07
我玩过角2组件和它们的组合，我遇到了丑陋的行为，这是由本机事件冒泡和@Output名称冲突造成的。
我有组件应用程序表单和模板中的表单。
<form (ngSubmit)="submitButtonClicked($event)">
<input type="text"/>
<button type="submit">Send</button>
</form>我在应用程序-中间组件中使用这个表单组件，它有自己的事件发射器和名称提交。
@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将被调用
- 当在应用程序中提交时称为(通缉行为)。
- 当表单被提交时，因为本机事件气泡到顶部(“寄生”行为)
我想，“寄生”行为是基于DOM事件冒泡的。我可以在event.stopPropagation()处理程序中通过submitButtonClicked ()来阻止它，但是如果我忘记了停止它，我会得到非常糟糕的错误。
一般来说，我认为这种行为很危险。如果我没有错，每个事件绑定表达式处理程序都可能被来自内部组件的本机事件称为“寄生”。如果与DOM事件(https://developer.mozilla.org/en-US/docs/Web/Events)的名称相同，并且我不讨论前向兼容性.
您可以在这里看到相同的问题：https://bitbucket.org/winsik/submit-event-issue/src
你遇到这个问题了吗？您如何命名您的@输出？
回答 1
Stack Overflow用户
发布于 2017-07-22 22:11:07
我用组件的名称作为@Output事件的前缀，这似乎非常有效，并提供了一个一致和清晰的约定，以避免您描述的问题。例如，假设我有一个名为TurnEditorComponent的组件-- @Output事件可能被命名为turnEditorChange、turnEditorFocus、turnEditorBlur等等。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40276400
复制
腾讯云开发者
