传入 $event 是靠不住的做法，违反了模板（用户看到的）和组件（应用如何处理用户数据）之间的分离关注原则。

==> 如何用模板引用变量来解决这个问题

模板引用变量

  1. 方式一，最简单

    1. @Component({
    2. selector: 'app-loop-back',
    3. template: `
    4.  <input #box (keyup)="0">
    5.  <p>{{box.value}}</p>
    6. `
    7. })
    8. export class LoopbackComponent { }

    除非你绑定一个事件，否则这将完全无法工作。 只有在应用做了些异步事件（如击键），Angular 才更新绑定（并最终影响到屏幕）。 本例代码将 keyup 事件绑定到了数字 0，这可能是最短的模板语句了。 虽然这个语句不做什么，但它满足 Angular 的要求，所以 Angular 将更新屏幕。

  2. 方式二，最简单

    1. @Component({
    2. selector: 'app-key-up2',
    3. template: `
    4.  <input #box (keyup)="onKey(box.value)">
    5.  <p>{{values}}</p>
    6. `
    7. })
    8. export class KeyUpComponent_v2 {
    9. values = '';
    10. onKey(value: string) {
    11.  this.values += value + ' | ';
    12. }
    13. }

    keyup.enter

    1. @Component({
    2. selector: 'app-key-up3',
    3. template: `
    4.  <input #box (keyup.enter)="onEnter(box.value)">
    5.  <p>{{value}}</p>
    6. `
    7. })
    8. export class KeyUpComponent_v3 {
    9. value = '';
    10. onEnter(value: string) { this.value = value; }
    11. }

    滚动事件变为被动监听

    了解即可