五、模板引用变量(获取DOM)

模板引用变量通常用来引用模板中的某个DOM元素，它还可以引用Angular组件或指令或[Web Component]
使用井号 (#) 来声明引用变量。 #phone的意思就是声明一个名叫phone的变量来引用元素。

<input #phone placeholder="phone number">

我们可以在模板中的任何地方引用模板引用变量。 比如声明在<input>上的phone变量就是在模板另一侧的<button>上使用的。

<input #phone placeholder="phone number">
<!-- lots of other elements -->
<!-- phone refers to the input element; pass its `value` to an event handler -->
<button (click)="callPhone(phone.value)">Call</button>

大多数情况下，Angular会把模板引用变量的值设置为声明它的那个元素。在上面例子中，phone 引用的是表示电话号码的<input>框。 “拨号”按钮的点击事件处理器把这个input值传给了组件的callPhone方法。 不过，指令也可以修改这种行为，让这个值引用到别处，比如它自身。 NgForm指令就是这么做的。

模板引用变量使用注意：

• 模板引用变量的作用范围是整个模板。 不要在同一个模板中多次定义同一个变量名，否则它在运行期间的值是无法确定的。
  
• 如果我在模板里面定义的局部变量和组件内部的属性重名会怎么样呢
  • 如果真的出现了重名，Angular 会按照以下优先级来进行处理
    
  • 模板局部变量 > 指令中的同名变量 > 组件中的同名属性
    
• 我们也可以用ref-前缀代替#。 下面的例子中就用把fax变量声明成了ref-fax而不是#fax。

  <input ref-fax placeholder="fax number">
  <button (click)="callFax(fax.value)">Fax</button>