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

EN

这是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完成许多很好的事情。我通常将该特性称为“hashtag语法”，因为它依赖于一个简单的hashtag来创建对模板中元素的引用：

上面的语法相当简单:它创建一个对输入元素的引用，稍后可以在我的模板中使用该元素。请注意，此变量的作用域是定义引用的整个HTML模板。

下面是我如何使用该引用来获取输入值的方法，例如:请注意，phone引用了 input 的HTMLElement对象实例。因此，phone拥有任何HTMLElement的所有属性和方法(id、name、innerHTML、value等)。

上面是一种很好的方法，可以避免在简单的表单中使用ngModel或其他类型的数据绑定，这些表单在验证方面不需要太多。

是否也适用于组件？

答案是肯定的！

..。最好的部分是我们获得了对实际组件实例HelloWorldComponent的引用，因此我们可以访问该组件的任何方法或属性(即使它们被声明为私有或受保护，这是令人惊讶的)：

@Component({ selector：'app-hello'，// ...导出类名称{ HelloComponent = 'Angular'；}

..。

{{helloComp.name}