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

Question

我正在尝试学习 Angular Material 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

#默认行为

大多数情况下， 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内房产@Component/@Directive装饰 (6):

exportAs is a name under which the component instance is exported in a template. Can be given a single name or a comma-delimited list of names.

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

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

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

<md-autocomplete #auto>

但

赋值给 exportAs 的值属性精确地指示我们从何处获取实例。

如果 md-autocomplete是指令然后 auto变量将引用 HTMLElement .

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