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

如果我们在这个元素上声明指令，那么template reference variable允许我们引用html元素或其他东西。

我们可以通过（1）

声明模板引用变量

#var
ref-var

#Default behavior

在大多数情况下， 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"

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

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。

因此，如果您怀疑它将引用什么，请更喜欢为模板引用变量指定值。

什么是#auto属性，以及为什么需要它

1 个答案:

#Default behavior

#Directives可以更改默认行为