我正在尝试学习 angular material 2 并#auto在自动完成中遇到了这个属性。我明白auto可以用任何文本替换，但为什么#这里之前需要一个auto，这个属性有什么名字？
<md-input-container>
<input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete">
^^^^ what is name of this property
<md-option *ngFor="let state of filteredStates | async" [value]="state">
{{ state }}
</md-option>
</md-autocomplete>
它是一个模板引用变量，如果我们在此元素上声明指令，则允许我们获取对 html 元素或其他内容的引用。
我们可以通过（1）声明模板引用变量
#var ref-var 在大多数情况下，Angular 将引用变量的值设置为声明它的 html 元素(2) 。
<div #divElem></div>
<input #inputEl>
<table #tableEl></table>
<form #formEl></form>
在前面的所有模板引用变量将引用相应的元素。
#divElem HTMLDivElement
#inputEl HTMLInputElement
#tableEl HTMLTableElement
#formEl HTMLFormElement
但是指令可以改变这种行为并将值设置为其他东西，比如它自己。
Angular 给组件赋值为空值的引用（三）
如果我们有这样的组件：
@Component({
selector: '[comp]',
...
})
export class SomeComponent {}
和模板为：
<div comp #someComp></div>
那么#someComp变量将引用组件本身 ( SomeComponent instance)。
Angular 不会在具有空值的引用中定位指令(4)
如果我们将@Component装饰器更改为@Directive
@Directive({
selector: '[comp]',
...
})
export class SomeDirective {}
那么#someComp变量将引用HTMLDivElement.
SomeDirective在这种情况下我们如何获得实例？
幸运的是，模板引用变量可以有值（5）
#var="exportAsValue"
ref-var="exportAsValue"
我们可以exportAs在@Component/@Directive装饰器（6）中定义属性：
exportAs是在模板中导出组件实例的名称。可以给出单个名称或以逗号分隔的名称列表。
@Directive({
selector: '[comp]',
exportAs: 'someDir',
...
})
export class SomeDirective {}
然后使用exportAsvalue 作为模板(7) 中模板引用变量的值：
<div comp #someComp="someDir"></div>
之后#someComp将参考我们的指令。
现在让我们假设我们有几个指令应用于这个组件。我们想要获得特定的指令实例。exportAs属性是解决这个问题的好选择。
让我们回到你的代码
如果你打开MdAutocomplete组件的源代码，你可以看到：
@Component({
...
exportAs: 'mdAutocomplete'
})
export class MdAutocomplete {
...
因为在你的模板中你有
#auto="mdAutocomplete"
然后#auto变量将引用MdAutocomplete组件的实例。此引用用于MdAutocompleteTrigger指令：
@Directive({
selector: 'input[mdAutocomplete], input[matAutocomplete],' +
'textarea[mdAutocomplete], textarea[matAutocomplete]',
...
})
export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
@Input('mdAutocomplete') autocomplete: MdAutocomplete;
因为您将auto变量传递给模板中的输入
<input mdInput placeholder="State" [mdAutocomplete]="auto"
在这种情况下，我们可以省略 value 并仅使用变量名，例如
<md-autocomplete #auto>
但
exportAs属性值的赋值精确地指示我们从何处获取实例。
如果md-autocomplete是指令，则auto变量将引用HTMLElement.
因此，如果您怀疑它会引用什么，则更喜欢为模板引用变量指定值。