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

EDIT

举个例子: https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview

它创建一个引用的模板变量

如果元素是普通DOM元素，则返回输入元素 组件或指令实例(如果它是带有组件或指令的元素) 一些特定的组件或指令，比如当bar为时使用#foo="bar"

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

这样的模板变量可以在模板绑定或元素查询中引用

@ViewChild('searchBox') searchBox:HTMLInputElement;

从angulartraining.com:

Template reference variables are a little gem that allows to get a lot of nice things done with Angular. I usually call that feature “the hashtag syntax” because, well, it relies on a simple hashtag to create a reference to an element in a template: <input #phone placeholder="phone number"> What the above syntax does is fairly simple: It creates a reference to the input element that can be used later on in my template. Note that the scope for this variable is the entire HTML template in which the reference is defined. Here’s how I could use that reference to get the value of the input, for instance: <!-- phone refers to the input element --> <button (click)="callPhone(phone.value)">Call</button> Note that phone refers to the HTMLElement object instance for the input. As a result, phone has all of the properties and methods of any HTMLElement (id, name, innerHTML, value, etc.) The above is a nice way to avoid using ngModel or some other kind of data binding in a simple form that does not require much in terms of validation. Does this also work with components? The answer is YES! ... the best part of it is that we’re getting a reference to the actual component instance, HelloWorldComponent, so we can access any methods or properties of that component (even if they are declared as private or protected, which is surprising): @Component({ selector: 'app-hello', // ... export class HelloComponent { name = 'Angular'; } [...] <app-hello #helloComp></app-hello> <!-- The following expression displays "Angular" --> {{helloComp.name}}

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