首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular如何响应DOM event

To bind to a DOM event, surround the DOM event name in parentheses and assign a quoted template statement to it.

语法:将dom事件的名称用圆括号包裹起来,再附上一个加上了双引号的模板声明。

例子:

<button (click)=“onClickMe()”>Click me!

看另一个例子:

代码语言:javascript
复制
    <h3>Jerry Template reference variable test</h3>
    <input #box (keyup)="0">
    <p>{{box.value}}</p>

运行效果:

当用户在input字段输入值时,输入值会自动出现在input element正下方的p element里。

然而template reference变量#box之后的 (keyup)="0"的含义是什么?

Angular updates the bindings (and therefore the screen) only if the app does something in response to asynchronous events, such as keystrokes. This example code binds the keyup event to the number 0, the shortest template statement possible. While the statement does nothing useful, it satisfies Angular’s requirement so that Angular will update the screen.

原来,Angular框架只有当应用响应某些同步或者异步事件,比如键盘敲击,鼠标点击时才会更新绑定信息进而刷新屏幕。因此为了使上面的例子能够工作,需要将keyup事件绑定到一个template statement上,即使该statement不做任何事情,即最简单的"0".

下一篇
举报
领券