模板中的Angular 2标签是什么意思？

我正在使用angular 2，发现了类似的东西

<input #searchBox (keyup)="search(searchBox.value)"

而且有效。

但是，我不了解#searchBox的含义。我还没有在文档中找到任何明确的内容。

谁能告诉我它是如何工作的？

它是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 }}

设置此#searchBox时，您可以在Typescript上获得此输入，例如

    @ViewChild('searchBox') searchBox;
    console.info(searchBox.nativeElement.value)

编辑

添加一些示例：https : //plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview

来自angulartraining.com：

模板引用变量是一个小宝石，它可以使Angular完成很多美好的事情。我通常将此功能称为“主题标签语法”，因为好吧，它依赖于简单的主题标签来创建对模板中元素的引用：

<input #phone placeholder="phone number">

以上语法的作用非常简单：它创建了对input元素的引用，  以后可以在我的模板中使用它。请注意，此变量的范围是在其中定义引用的整个HTML模板。

例如，这是我如何使用该引用获取输入值的方法：

<!-- phone refers to the input element --> 
<button (click)="callPhone(phone.value)">Call</button>

请注意，  phone  引用了输入的  HTMLElement对象实例  。结果，  电话  具有任何HTMLElement的所有属性和方法（id，名称，innerHTML，值等）。

上面是避免在验证方面不需要太多的简单形式使用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元素元件
• 组件或指令实例，如果它是具有组件或指令的元素
• 一些特定的组件或指令（如果使用#foo="bar"时bar为when 是）

@Directive({ // or @Component
  ...
  exportAs: 'bar'
})

可以在模板绑定或元素查询中引用此类模板变量

@ViewChild('searchBox') searchBox:HTMLInputElement;