什么是#auto属性，以及为什么需要它 [英] What is #auto attribute here and why it is required

问题描述

我正在尝试学习角度素材2并在自动完成中遇到了这个 #auto 属性。我理解 auto 可以替换为任何文本，但为什么在 auto 之前需要＃，这有什么名称属性？

I am trying to learn angular material 2 and came across this #auto attribute in autocomplete.I understand auto can be replaced with any text, but why there need a # here before auto and what is there any name of this attribute?

<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>

推荐答案

这是模板引用变量，如果我们声明指令，它们允许我们引用html元素或其他内容关于这个元素。

It is a template reference variable that allows us to get reference to html element or something else if we declare directive on this element.

我们可以通过声明模板引用变量（1）

We can declare template reference variable via (1)

• #var


• ref-var

• #var
• ref-var

在大多数情况下， Angular集引用变量对声明它的html元素的值（2）。

In most cases, Angular sets the reference variable's value to the html element on which it was declared (2) .

<div #divElem></div>
<input #inputEl>
<table #tableEl></table>
<form #formEl></form>

在前面的所有模板中，引用变量都将引用相应的元素。

In the preceding all template reference variables will refer to the corresponding elements.

#divElem     HTMLDivElement
#inputEl     HTMLInputElement
#tableEl     HTMLTableElement
#formEl      HTMLFormElement

---

#Directives可以改变默认行为

<但是，指令可以改变该行为并将值设置为其他值，例如它自己。

---

#Directives can change default behavior

But a directive can change that behavior and set the value to something else, such as itself.

Angular将具有空值的引用分配给组件（3）

如果我们有这样的组件：

If we have component like:

@Component({
  selector: '[comp]',
  ...
})
export class SomeComponent {}

和模板为：

<div comp #someComp></div>

然后 #someComp 变量将引用组件本身（ SomeComponent实例）。

then #someComp variable will refer to component itself (SomeComponent instance).

Angular不会在带空值的引用中找到指令（4）

如果我们将 @Component decorator更改为 @Directive

If we change @Component decorator to @Directive

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

然后 #someComp 变量将引用 HTMLDivElement 。

如何在这种情况下我们可以得到 SomeDirective 实例？

幸运的是，模板引用变量可以有价值（5）

• ＃var =exportAsValue

ref-var =exportAsValue

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

We can define exportAs property within @Component/@Directive decorator (6):

exportAs 是在
模板中导出组件实例的名称。可以给出单个名称或以逗号分隔的
名称列表。

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）：

and then use exportAs value as value for template reference variable within template (7):

<div comp #someComp="someDir"></div>

之后 #someComp 将参考我们的指令。

After that #someComp will refer to our directive.

现在让我们假设我们有几个指令应用于这个组件。我们希望获得特定的指令实例。 exportAs 属性是解决此问题的不错选择。

Now let's imagine we have several directives applied to this component. And we want to get specific directive instance.exportAs property is a good choice to solve this problem.

让我们回到您的代码

如果您打开的源代码，MdAutocomplete 您可以看到的组件：

If you open source code of MdAutocomplete component you can see:

@Component({
  ...
  exportAs: 'mdAutocomplete'
})
export class MdAutocomplete {
  ...

因为在你的模板中你有

＃auto =mdAutocomplete

然后 #auto 变量将引用 MdAutocomplete 组件的实例。此引用用于 MdAutocompleteTrigger 指令：

Then #auto variable will refer to instance of MdAutocomplete component. This reference is used in MdAutocompleteTrigger directive:

@Directive({
  selector: 'input[mdAutocomplete], input[matAutocomplete],' +
            'textarea[mdAutocomplete], textarea[matAutocomplete]',
  ...
})
export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
  @Input('mdAutocomplete') autocomplete: MdAutocomplete;

因为您将 auto 变量传递给模板内的输入

because you're passing auto variable to input within template

<input mdInput placeholder="State" [mdAutocomplete]="auto"

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

We can omit value and use only variable name in this case like

<md-autocomplete #auto>

但是

• 赋值为 exportAs 属性精确指示我们从何处获取实例。

• assignment value to value of exportAs property precisely indicates us where to get the instance.

如果 md-autocomplete 是一个指令，那么 auto 变量将引用 HTMLElement 。

if md-autocomplete is a directive then auto variable will refer to HTMLElement.

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

So prefer specifying value for template reference variable if you doubt what it will refer to.

这篇关于什么是#auto属性，以及为什么需要它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！