angular 事件和模板引用

转载自 http://www.ngui.cc/news/show-112.html

在 Angular 中，我们可以使用 (eventName) 语法，进行事件绑定。此外，可以使用 #variableName 的语法，定义模板引用。具体示例如下：

SimpleFormComponent

import {Component, OnInit} from '@angular/core'; 

@Component({
  selector: 'app-simple-form',
  template: `
    <div>
     <input #myInput type="text">
     <button (click)="onClick(myInput.value)">点击</button>
    </div>
  `,
  styles: []
}) 

export class SimpleFormComponent implements OnInit {
  onClick(value) { console.log(value);
  }

  ngOnInit() {}
}

需要注意的是，若我们改变绑定的表达式为 (click)="onClick(myInput)" ，当我们点击按钮时，控制台输出的结果是：

<input type="text">

通过该输出结果，我们可以知道 #variableName 语法，我们获取的对象是对应 DOM 元素的引用。