javascript - ¿Qué es el atributo#auto aquí y por qué se requiere?

angular angular2-forms

Question

Estoy tratando de aprender el material angular 2 y encontré este atributo #auto en autocompletar. Entiendo que auto se puede reemplazar con cualquier texto, pero ¿por qué necesita un # aquí antes de auto y cuál es el nombre de este atributo?

<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

Es una variable de referencia de plantilla que nos permite obtener referencias al elemento html o algo más si declaramos una directiva sobre este elemento.

Podemos declarar la variable de referencia de plantilla a través de (1)

• #var
• ref-var

#Comportamiento por defecto

En la mayoría de los casos, Angular establece el valor de la variable de referencia en el elemento html en el que se declaró (2).

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

En el precedente, todas las variables de referencia de plantilla se referirán a los elementos correspondientes.

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

# Las directivas pueden cambiar el comportamiento predeterminado

Pero una directiva puede cambiar ese comportamiento y establecer el valor a otra cosa, como a sí misma.

Angular asigna referencias con valor vacío al componente (3)

Si tenemos componentes como:

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

y plantilla como:

<div comp #someComp></div>

entonces la variable #someComp se referirá al componente mismo ( SomeComponent instance ).

Angular no localiza directivas en referencias con valor vacío (4)

Si @Component decorador @Directive a @Directive

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

entonces la variable #someComp se referirá a HTMLDivElement .

¿Cómo podemos obtener la instancia de SomeDirective en este caso?

Afortunadamente, la variable de referencia de plantilla puede tener un valor (5)

• #var="exportAsValue"

• ref-var="exportAsValue"

Podemos definir la propiedad exportAs dentro del decorador @Component/@Directive (6):

exportAs es un nombre bajo el cual la instancia del componente se exporta en una plantilla. Se le puede dar un solo nombre o una lista de nombres delimitada por comas.

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

y luego use exportAs value como valor para la variable de referencia de plantilla dentro de template (7):

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

Después de eso #someComp se referirá a nuestra directiva.

Ahora imaginemos que tenemos varias directivas aplicadas a este componente. Y queremos obtener una instancia directiva específica. exportAs propiedad exportAs es una buena opción para resolver este problema.

Volvamos a tu código

Si abre el código fuente del componente MdAutocomplete , puede ver:

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

Como en tu plantilla tienes

#auto="mdAutocomplete"

Entonces la variable #auto se referirá a la instancia del componente MdAutocomplete . Esta referencia se utiliza en la directiva MdAutocompleteTrigger :

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

porque estás pasando auto variable auto a la entrada dentro de la plantilla

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

Podemos omitir el valor y usar solo el nombre de la variable en este caso como

<md-autocomplete #auto>

pero

• El valor de asignación al valor de la propiedad exportAs nos indica con precisión dónde obtener la instancia.

• Si md-autocomplete es una directiva, auto variable auto se referirá a HTMLElement .

Por lo tanto, prefiera especificar el valor para la variable de referencia de plantilla si duda de a qué se referirá.