共计 2213 个字符，预计需要花费 6 分钟才能阅读完成。
【翻译】【教程】模版引用变量的魔法
原文链接：https://blog.angulartraining…. 作者：Alain Chautard 译者：而井
模版引用变量是个好东西，它允许 Angular 完成许多有用的事情。我经常称这个功能为“井号语法”，因为在模版中它依赖一个简单的井号来创建对一个元素（译者注：元素包括 HTML 元素和组件元素）的引用：
<input #phone placeholder=”phone number”>
上述的语法是如此的简洁：它创建了一个指向 input 元素的引用，这个引用稍后可以在我的模版中使用。需要注意的是，这个（引用）变量的作用域是它所定义的整个 HTML 模版（的范围）（译者注：即在定义这个引用变量的 HTML 模版中都可以访问这个变量）。
例如，这里就是我如何用这个引用来获取输入框的值（的例子）：
<!– phone 指向输入框元素 –>
<button (click)=”callPhone(phone.value)”>Call</button>
注意那个 phone（变量）指向了 input 的 HTMLElement 对象实例。所以 phone（变量）持有了（相应）HTMLElement（实例对象）的任何属性和方法，如 id、name、innerHTML、value 等。
上述是一种避免使用 ngModel 或其他数据绑定的好方法，（因为）这种方法在校验方面上不需要写太多代码。
在组件上也奏效吗？
答案就是可以奏效！假设我们有 HelloWorldComponent 如下：
@Component({
selector: ‘app-hello’,
template: `
<div>
<h2>Hello {{name}}</h2>
</div>
`
})
export class HelloComponent {
name = ‘Angular’;
}
现在按照如下代码，我们使用了“井号语法”得到了组件的引用：
<app-hello #helloComp></app-hello>
它（模版引用变量）一个最好的地方就是我们可以获取实际上的组件实例对象 HelloWorldComponent。所以我们可以访问这个组件的任何方法或属性，即使他们（的权限）是声明为私有或保护的，多么令人惊喜：
<app-hello #helloComp></app-hello>
<!– 下面这个表达式将会显示（文本）”Angular” –>
{{helloComp.name}}
我们不仅可以通过这种语法来读取一个组件的数据，而且也能修改它。
对指令也奏效吗？
当然（可以），不过这里需要进一步了解它（模版引用变量）。大部分的指令将会被作为（译者注：HTML 或组件标签）的属性来使用，这意味着我们无法在那里真正应用“井号语法”，除非我们使用相同的语法进行扭转：
<form (ngSubmit)=”onSubmit(myForm)” #myForm=”ngForm”>
在上面的例子里，myForm 是一个指向（应用于表单的）ngForm 指令的引用。
现在如果你细看上面的 HTML 元素，你可能会想：“等一下，那里并没有 ngForm 指令！我没有见过任何属性叫 ngForm 的！”，你（如果）这样想就对了。
答案就在 ngForm 指令的源代码中：
@Directive({
selector: ‘form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]’,
…
exportAs: ‘ngForm’
})
看到那个指令的选择器的了没？它（指令）将应用于任何没有 ngNoForm 和 formGroup 属性的 form 表单元素之上。因此，ngForm 指令将自动应用于我的 form 元素之上。
第二个被注意到的趣事就是装饰器中的 exportAs 属性。它告诉 Angular：“嘿，如果有人想用模版引用变量来指向这个指令，（那么指令的）名字就叫做 ngForm”。
现在我们已经知道它是如何运作的了。我们可以创建定制指令，并通过一个叫 exportAs 的来暴露该指令。
译者附
为了方便大家理解模版引用变量对指令的操控，我把相关链接的核心演示代码附在本文最后面。
import {Component} from ‘@angular/core’;
import {NgForm} from ‘@angular/forms’;
@Component({
selector: ‘example-app’,
template: `
<form #f=”ngForm” (ngSubmit)=”onSubmit(f)” novalidate>
<input name=”first” ngModel required #first=”ngModel”>
<input name=”last” ngModel>
<button>Submit</button>
</form>
<p>First name value: {{first.value}}</p>
<p>First name valid: {{first.valid}}</p>
<p>Form value: {{f.value | json}}</p>
<p>Form valid: {{f.valid}}</p>
`,
})
export class SimpleFormComp {
onSubmit(f: NgForm) {
console.log(f.value); // {first: ”, last: ”}
console.log(f.valid); // false
}
}
