这里的#auto 属性是啥以及为啥需要它

Posted 2023-02-19

【中文标题】这里的#auto 属性是啥以及为啥需要它

【英文标题】：What is #auto attribute here and why it is required这里的#auto 属性是什么以及为什么需要它

【发布时间】：2017-12-28 05:58:49

【问题描述】：

我正在尝试学习角度材料 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>

【参考方案1】：

这是一个template reference variable，如果我们在该元素上声明指令，它允许我们获取对 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

---

#Directives 可以改变默认行为

但是指令可以改变这种行为并将值设置为其他东西，例如它自己。

Angular 将空值的引用分配给组件 (3)

如果我们有这样的组件：

@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"

我们可以在@Component/@Directive装饰器中定义exportAs属性（6）：

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

@Directive(
  selector: '[comp]',
  exportAs: 'someDir',
  ...
)
export class SomeDirective 

然后使用exportAs值作为模板内模板引用变量的值 (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"

在这种情况下，我们可以省略值并只使用变量名，例如

<md-autocomplete #auto>

但是

exportAs 属性值的赋值精确地指示我们从哪里获取实例。

如果md-autocomplete 是一个指令，那么auto 变量将引用HTMLElement。

因此，如果您怀疑模板引用变量将引用什么，则最好为模板引用变量指定值。

【讨论】：

更新链接：angular.io/guide/template-reference-variables