什么是#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

#Default行为

在大多数情况下,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在这种情况下我们如何获得实例？

幸运的是,Template引用变量可以有值(5)

• #var="exportAsValue"

• ref-var="exportAsValue"

我们可以exportAs在@Component/@Directivedecorator(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"

我们可以省略值,在这种情况下只使用变量名称

<md-autocomplete #auto>

但

• 赋值给exportAs属性值精确地指示我们在哪里获取实例.

• if md-autocomplete是一个指令,那么auto变量将引用HTMLElement.

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