为什么断点会影响我的应用程序的行为? [英] Why do breakpoints affect the behaviour of my application?

问题描述

我已按照以下说明进行操作:

I have followed these instructions:

1)在Visual Studio 2017中创建默认的Angular应用程序:File/New/ASP.NET Core Web Application/Angular.

1) Create a default Angular application in Visual Studio 2017: File/New/ASP.NET Core Web Application/Angular.

2)将以下代码添加到作为模板一部分的Counter组件(counter.component.ts):

2) Add the following code to the Counter component (counter.component.ts), which is part of the template:

@HostListener('keydown', ['$event'])
onInput(e: any) {
  if (e.which < 48 || e.which > 57) {
      e.preventDefault();
  }
}

3)替换: counter.component.html 与此:

<input type="text" placeholder="Volume" numericControl />

运行该应用程序，然后导航到计数器URL".一切正常，即输入框仅允许数字.但是，然后在@HostListener中添加一个断点，并在按输入框内的一个键时到达该断点-输入框中将不显示任何内容.删除断点后，数字将再次按预期出现在输入框中.为什么会这样?

Run the app and navigate to the Counter URL. Everything works as expected i.e. the input box only allows numbers. However, I then add a breakpoint to @HostListener and the breakpoint is reached when I press a key inside the input box - nothing will appear in the input box. Once I remove the breakpoint, then numbers will appear in the input box as expected again. Why is this?

推荐答案

Angular Zone在事件侦听器上超时，而Angular正在中止侦听器以保护应用程序的性能.

The Angular Zone is timing out on the event listener, and Angular is aborting the listener to protect the performance of the application.

您会在/src/app/polyfills.ts 文件中找到加载的区域，并且如果禁用区域的使用，事件将不会终止.

You'll find zones loaded in the /src/app/polyfills.ts file, and if you disable the use of zones the event won't abort.

我试图找到支持文档来支持我的回答，但可惜的是，Angular的这一领域文献很少.

I was trying to find supporting documentation to support my answer, but sadly this area of Angular is poorly documented.

这篇关于为什么断点会影响我的应用程序的行为?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！