我正在使用 angular 2，我发现了类似
<input #searchBox (keyup)="search(searchBox.value)"
它有效。
但是，我不明白 #searchBox 的含义。我在文档中也没有发现任何明确的内容。
谁能向我解释一下它是如何工作的？
【问题讨论】：
#searchBox 可以让您在keyup 处理程序中使用searchBox.value。
标签： javascript html angular typescript
这是 Angular 2 模板系统中使用的语法，它将 DOM 元素声明为变量。
这里我给我的组件一个模板 URL：
import {Component} from 'angular2/core';
@Component({
selector: 'harrys-app',
templateUrl: 'components/harry/helloworld.component.html'
})
export class HarrysApp {}
模板呈现 HTML。在模板中，您可以使用数据、属性绑定和事件绑定。这是通过以下语法完成的：
# - 变量声明
() - 事件绑定
[] - 属性绑定
[()] - 双向属性绑定
{{ }} - 插值
* - 结构指令
# 语法可以声明引用模板中 DOM 对象的局部变量名称。
例如
<span [hidden]="harry.value">*</span>
<input type="text" #harry>
{{ harry.value }}
【讨论】：
<input #bla style="display: none;" value="Foo" /<div> {{bla.value}} </div>。 Foo 显示在 div 中。
当你设置这个#searchBox时，你可以在你的Typescript上得到这个输入
@ViewChild('searchBox') searchBox;
console.info(searchBox.nativeElement.value)
编辑
添加一些例子： https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview
【讨论】：
模板引用变量 是一个小宝石，可以让 Angular 完成很多好事情。我通常将此功能称为“主题标签语法”，因为它依赖于一个简单的主题标签来创建对模板中元素的引用：
<input #phone placeholder="phone number">上述语法的作用相当简单：它创建了一个对 input 元素的引用，以后可以在我的模板中使用该元素。请注意，此变量的作用域是定义引用的整个 HTML 模板。
以下是我如何使用该引用来获取输入的值，例如：
<!-- phone refers to the input element --> <button (click)="callPhone(phone.value)">Call</button>请注意，phone 指的是 input 的 HTMLElement 对象实例。因此，phone 拥有任何 HTMLElement 的所有属性和方法（id、name、innerHTML、value 等）
以上是避免在不需要太多验证的简单表单中使用 ngModel 或其他类型数据绑定的好方法。
这也适用于组件吗？
答案是肯定的！
...其中最好的部分是我们获得了对实际组件实例 HelloWorldComponent 的引用，因此我们可以访问该组件的任何方法或属性（即使它们被声明为私有或受保护，这令人惊讶）：
@Component({ selector: 'app-hello', // ... export class HelloComponent { name = 'Angular'; }[...]
<app-hello #helloComp></app-hello> <!-- The following expression displays "Angular" --> {{helloComp.name}}
【讨论】：
它创建一个引用的模板变量
input 元素（如果该元素是普通 DOM 元素）bar 为#foo="bar" 时，某些特定的组件或指令@Directive({ // or @Component
...
exportAs: 'bar'
})
这样的模板变量可以在模板绑定或元素查询中引用
@ViewChild('searchBox') searchBox:HTMLInputElement;
【讨论】：
ngModel 用于表单集成。您可以在没有ngModel 的情况下进行所有其他类型的绑定。
ngAfterViewInit而不实际导入它的？并实施？这是 plunker 的内置功能吗？