O que é # atributo automático aqui e por que é necessário

Eu estou tentando aprender o material angular 2 e me deparei com este atributo #auto no autocomplete. Eu entendo auto pode ser substituído por qualquer texto, mas por que precisa de um # aqui antes de auto e qual é o nome desse atributo?

     ^^^^ what is name of this property  {{ state }}   

É uma variável de referência de modelo que nos permite obter referência ao elemento html ou outra coisa se declararmos diretiva sobre este elemento.

Podemos declarar variável de referência de modelo via (1)

  • #var
  • ref-var

Comportamento #Default

Na maioria dos casos, Angular define o valor da variável de referência para o elemento html no qual foi declarado (2).

 

No anterior, todas as variables ​​de referência do modelo se referirão aos elementos correspondentes.

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

# Diretrizes podem mudar o comportamento padrão

Mas uma diretiva pode alterar esse comportamento e definir o valor para outra coisa, como ela mesma.

Angular atribui referências com valor vazio ao componente (3)

Se temos componente como:

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

e modelo como:

 

então a variável #someComp irá se referir ao componente em si ( SomeComponent instance ).

Angular não localiza diretivas em referências com valor vazio (4)

Se @Component decorador @Directive para @Directive

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

então a variável #someComp se referirá a HTMLDivElement .

Como podemos obter a instância SomeDirective neste caso?

Felizmente, a variável de referência do modelo pode ter valor (5)

  • #var="exportAsValue"

  • ref-var="exportAsValue"

Podemos definir propriedade exportAs dentro de @Component/@Directive decorator (6):

exportAs é um nome sob o qual a instância do componente é exportada em um modelo. Pode receber um nome único ou uma lista de nomes delimitada por vírgulas.

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

e, em seguida, use o valor exportAs como valor para a variável de referência de modelo no modelo (7):

 

Depois disso, #someComp irá se referir à nossa diretriz.

Agora vamos imaginar que temos várias diretivas aplicadas a este componente. E queremos obter uma instância de diretiva específica. exportAs propriedade exportAs é uma boa opção para resolver esse problema.


Vamos voltar ao seu código

Se você abrir o código-fonte do componente MdAutocomplete , poderá ver:

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

Desde em seu modelo você tem

#auto="mdAutocomplete"

Em seguida, a variável #auto se referirá à instância do componente MdAutocomplete . Esta referência é usada na diretiva MdAutocompleteTrigger :

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

porque você está passando auto variável auto para inserir no modelo

  

Podemos omitir valor e usar apenas o nome da variável neste caso como

  

mas

  • valor de atribuição ao valor da propriedade exportAs indica precisamente onde obter a instância.

  • Se md-autocomplete for uma diretiva, auto variável auto se referirá a HTMLElement .

Portanto, prefira especificar valor para a variável de referência do modelo se você duvidar do que ele se referirá.