¿Qué hace un atributo `#` en HTML?

Estoy escribiendo un controller para hacer algo con algún elemento cuando un usuario hace clic en un elemento diferente.

Al principio tuve lo siguiente (Esto es usando Angular2 pero sospecho que la única diferencia es cómo se maneja el evento onclick ):

  <span> <input type="text" id="bioName"> </span> <span class="icon-pencil" (click)="editField(bioName);"></span> 

… pero esto no funcionó. Luego encontré un ejemplo que identificó el campo de input de manera diferente, y esto funcionó para mí. Fue lo siguiente:

  <span> <input type="text" #bioName> </span> <span class="icon-pencil" (click)="editField(bioName);"></span> 

Desafortunadamente no puedo encontrar nada que explique esto. La búsqueda de "hash" y "pound" con HTML y Javascript produce demasiados resultados que no tienen nada que ver con esto en el área temática.

Entonces, ¿qué hace # en este caso? ¿No se puede usar el id para get una reference al elemento DOM al configurar un controller de events? ¿Cómo se llama esto para poder searchlo en Google y leer la documentation apropiada?

Esto es específico de Angular2, HTML regular no reconoce esta syntax, es decir, debe usar id="bioName" para acceder a la label con CSS / JavaScript.

Aquí hay más información sobre cómo usar # en Angular2.

Hash ( # ) es la syntax para definir la variable de la plantilla en las templates de Angular 2. Se usa para asignar identificadores únicos a los elementos de la plantilla que luego puede usar para get una reference a los elementos de la plantilla en el componente. En su caso, por ejemplo, puede usar la variable bioName para get una reference al elemento de input en su componente y puede hacer lo que quiera con él: obtenga el nombre del file, el tamaño del file o incluso el file. Esto se hace usando el decorador ViewChild . Puedes ver la respuesta que escribí hace unos días y ver para qué templates se usan principalmente las variables.