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

问题描述

我正在尝试学习 angular material 2 并在自动完成中遇到了这个 #auto 属性.我知道 auto 可以替换为任何文本，但为什么需要一个# 在 auto 之前，这个属性的名字是什么?

<input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="stateCtrl"></md-input-container><md-autocomplete #auto="mdAutocomplete">^^^^ 这个属性的名字是什么<md-option *ngFor="let state of filteredStates | async" [value]="state">{{ 状态 }}</md-option></md-自动完成>

解决方案

It is a 模板引用变量，如果我们在此元素上声明指令，它允许我们获取对 html 元素或其他内容的引用.

我们可以通过(1)

声明模板引用变量

• #var
• ref-var

#默认行为

在大多数情况下，Angular 将引用变量的值设置为声明它的 html 元素 (2).

<输入#inputEl><table #tableEl></table><form #formEl></form>

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

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

<小时>

#Directives 可以改变默认行为

但是指令可以改变这种行为并将值设置为其他东西，比如它自己.

Angular 将空值引用分配给组件 (3)

如果我们有这样的组件:

@Component({选择器:'[comp]'，...})导出类 SomeComponent {}

和模板为:

然后 #someComp 变量将引用组件本身(SomeComponent 实例).

Angular 不会在具有空值的引用中定位指令 (4)

如果我们把 @Component 装饰器改成 @Directive

@Directive({选择器:'[comp]'，...})导出类 SomeDirective {}

然后 #someComp 变量将引用 HTMLDivElement.

在这种情况下我们如何获得 SomeDirective 实例?

幸运的是，模板引用变量可以有值 (5)

• #var="exportAsValue"

• ref-var="exportAsValue"

我们可以在@Component/@Directive装饰器中定义exportAs属性:

<块引用>

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

@Directive({选择器:'[comp]'，exportAs: 'someDir',...})导出类 SomeDirective {}

然后使用 exportAs 值作为模板内模板引用变量的值 (7):

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

之后 #someComp 将引用我们的指令.

现在让我们假设我们有几个指令应用于这个组件.并且我们想要获取特定的指令实例.exportAs 属性是解决这个问题的好选择.

<小时>

让我们回到你的代码

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

@Component({...exportAs: 'mdAutocomplete'})导出类 MdAutocomplete {...

因为在你的模板中你有

#auto="mdAutocomplete"

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

@Directive({选择器:'输入[mdAutocomplete]，输入[matAutocomplete]，'+'textarea[mdAutocomplete], textarea[matAutocomplete]',...})导出类 MdAutocompleteTrigger 实现 ControlValueAccessor、OnDestroy {@Input('mdAutocomplete') 自动完成:MdAutocomplete;

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

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

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

但是

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

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

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

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>

解决方案

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.

We can declare template reference variable via (1)

• #var
• ref-var

#Default behavior

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 can change default behavior

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

Angular assigns references with empty value to component (3)

If we have component like:

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

and template as:

<div comp #someComp></div>

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

Angular doesn't locate directives in references with empty value (4)

If we change @Component decorator to @Directive

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

then #someComp variable will refer to HTMLDivElement.

How we can get SomeDirective instance in this case?

Fortunately, Template reference variable can have value (5)

• #var="exportAsValue"

• ref-var="exportAsValue"

We can define exportAs property within @Component/@Directive decorator (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 {}

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

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

After that #someComp will refer to our directive.

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.

---

Let's go back to your code

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

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

Since in your template you have

#auto="mdAutocomplete"

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;

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>

but

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

• 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屋！