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!

看另一个例子：

    <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".

本文分享 CSDN - 汪子熙。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。