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

Question

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

Answer 1

它是一个模板引用变量，如果我们在此元素上声明指令，它允许我们获取对 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 将空值引用分配给组件 (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"

我们可以在

exportAs

装饰器

中定义

@Component/@Directive属性（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

  。

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