Javascript 这里的#auto属性是什么？为什么需要它

我试图学习angular material 2，在autocomplete中遇到了这个

#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>

^^^^这个物业的名称是什么
{{state}}

如果我们对html元素声明指令，它允许我们获取对该元素的引用或其他内容

我们可以通过声明模板引用变量（1）

• #var

• ref var

#默认行为 在大多数情况下，Angular将引用变量的值设置为声明它的html元素（2）

---

#指令可以更改默认行为 但是指令可以改变这种行为，并将值设置为其他值，例如它本身

角度将空值的参考指定给组件（3）

如果我们有如下组件：

@Component({
  selector: '[comp]',
  ...
})
export class SomeComponent {}

和模板为：

<div comp #someComp></div>

然后

#一些comp

变量将引用

htmldevelment

在这种情况下，我们如何获得

SomeDirective

实例

幸运的是，模板引用变量可以有值（5）

• #var=“exportAsValue”

• ref var=“exportAsValue”

我们可以在

@Component/@Directive

装饰器中定义

exportAs

属性（6）：

exportAs是一个名称，组件实例在该名称下以 模板。可以指定单个名称或逗号分隔的列表 名字

@指令({
选择器：“[comp]”，
exportAs:'someDir'，
...
})
导出类指令{}

然后使用exportAs值作为模板内模板参考变量的值（7）：

之后，一些公司将参考我们的指令

现在，让我们假设有几个指令应用于这个组件。我们希望得到特定的指令实例。

exportAs

属性是解决这个问题的一个很好的选择

---

让我们回到你的代码

如果打开

MdAutocomplete

组件的源代码，您可以看到：

@组件({
...
exportAs:'mdAutocomplete'
})
导出类MdAutocomplete{
...

因为在你的模板中你有

\auto=“mdAutocomplete”

然后

#auto

变量将引用

MdAutocomplete

组件的实例。此引用用于

mdautocompletettrigger

指令：

@指令({
选择器：“输入[mdAutocomplete]，输入[matAutocomplete]，”+
'textarea[mdAutocomplete]，textarea[matAutocomplete]，
...
})
导出类MdAutocompleteTrigger实现ControlValueAccessor，OnDestroy{
@输入（'mdAutocomplete'）自动完成：mdAutocomplete；

因为您正在将

auto

变量传递给模板内的输入

更新链接：
@Component({
  selector: '[comp]',
  ...
})
export class SomeComponent {}

<div comp #someComp></div>

@Directive({
  selector: '[comp]',
  ...
})
export class SomeDirective {}