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

Question

我正在尝试学习 angular material 2 并且在 autocomplete.I 中遇到了这个 #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

#指令可以改变默认行为

但是指令可以更改该行为并将值设置为其他内容，例如它本身。

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 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值作为模板中模板引用变量的值 (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 属性是什么以及为什么需要它

What is #auto attribute here and why it is required

javascript

angular2-forms

angular

#默认行为

#指令可以改变默认行为