javascript - sintaxis - template reference variables

¿Qué significan los hashtags de Angular 2 en la plantilla?

Question

Estoy trabajando con angular 2 y he encontrado algo como

<input #searchBox (keyup)="search(searchBox.value)"

y funciona.

Sin embargo, no entiendo el significado de #searchBox . No he encontrado nada claro tampoco en el documento.

¿Alguien podría explicarme cómo funciona?

Gracias

Answer 1

Crea una variable de plantilla que hace referencia

• el elemento de input si el elemento es un elemento DOM simple
• la instancia de componente o directiva si es un elemento con un componente o directiva
• algún componente específico o directiva si se usa como #foo="bar" cuando bar es

@Directive({ // or @Component
...
exportAs: ''bar''
})

Dicha variable de plantilla se puede hacer referencia en enlaces de plantilla o en consultas de elementos como

@ViewChild(''searchBox'') searchBox:HTMLInputElement;

Answer 2

Cuando configura este #searchBox, puede obtener esta entrada en su Typecript como

 @ViewChild(''searchBox'') searchBox;
console.info(searchBox.nativeElement.value)

EDITAR

Agregando un ejemplo: https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview

Answer 3

Desde angulartraining.com :

Las variables de referencia de plantilla son una pequeña joya que permite hacer muchas cosas buenas con Angular. Normalmente llamo a esa característica "la sintaxis de hashtag" porque, bueno, se basa en un simple hashtag para crear una referencia a un elemento en una plantilla:

<input #phone placeholder="phone number">

Lo que hace la sintaxis anterior es bastante simple: crea una referencia al elemento de entrada que se puede usar más adelante en mi plantilla. Tenga en cuenta que el alcance de esta variable es la plantilla HTML completa en la que se define la referencia.

Así es como podría usar esa referencia para obtener el valor de la entrada, por ejemplo:

<!-- phone refers to the input element -->
<button (click)="callPhone(phone.value)">Call</button>

Tenga en cuenta que el teléfono hace referencia a la instancia del objeto HTMLElement para la entrada . Como resultado, el teléfono tiene todas las propiedades y métodos de cualquier elemento HTMLE (id, nombre, innerHTML, valor, etc.)

Lo anterior es una buena manera de evitar el uso de ngModel u otro tipo de enlace de datos en una forma simple que no requiere mucho en términos de validación.

¿Esto también funciona con componentes?

¡La respuesta es sí!

... la mejor parte es que estamos obteniendo una referencia a la instancia del componente real, HelloWorldComponent, para que podamos acceder a cualquier método o propiedades de ese componente (incluso si se declaran como privados o protegidos, lo cual es sorprendente) :

@Component({
selector: ''app-hello'',
// ...
export class HelloComponent {
name = ''Angular'';
}

[...]

<app-hello #helloComp></app-hello>
<!-- The following expression displays "Angular" -->
{{helloComp.name}}

Answer 4

Es la sintaxis utilizada en el sistema de plantillas Angular 2 que declara elementos dom como variables.

aquí le doy a mi componente una URL de plantilla

import {Component} from ''angular2/core'';
@Component({
selector: ''harrys-app'',
templateUrl: ''components/harry/helloworld.component.html''
})
export class HarrysApp {}

Las plantillas procesan HTML. En una plantilla puede usar datos, enlace de propiedad y enlace de evento. Esto se cumple con la siguiente sintaxis:

# - declaración variable

() - enlace de evento

[] - enlace de propiedad

[()] - enlace de propiedad bidireccional

{{ }} - interpolación

* - directivas estructurales

La sintaxis # puede declarar nombres de variables locales que hacen referencia a objetos DOM en una plantilla. P.ej

 <span [hidden]="harry.value">*</span>
<input type="text" #harry>
{{ harry.value }}