Que signifie le hashtag Angular 2 dans le modèle?

Je travaille avec angular 2 et j’ai trouvé quelque chose comme

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

et il fonctionne.

Cependant, je ne comprends pas la signification de #searchBox . Je n’ai rien trouvé de clair ni dans le doc.

Quelqu’un pourrait-il m’expliquer comment cela fonctionne?

Merci

C’est la syntaxe utilisée dans le système de modélisation Angular 2 qui déclare les éléments dom en tant que variables.

ici, je donne à mon composant un modèle d’URL

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

Modèles de rendu HTML. Dans un modèle, vous pouvez utiliser des données, une liaison de propriété et une liaison d’événement. Ceci est accompli avec le sytax suivant:

# – déclaration de variable

() – liaison d’événement

[] – liaison de propriété

[()] – liaison de propriété bidirectionnelle

{{ }} – interpolation

* – directives structurelles

La syntaxe # peut déclarer des noms de variables locales qui référencent des objects DOM dans un modèle. Par exemple

  *  {{ harry.value }} 

Lorsque vous définissez cette #searchBox, vous pouvez obtenir cette entrée sur votre TypeScript

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

MODIFIER

Ajouter un exemple: https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview

Il crée une variable de modèle qui référence

  • l’élément d’ input si l’élément est un élément DOM simple
  • le composant ou l’instance de directive s’il s’agit d’un élément avec un composant ou une directive
  • un composant ou une directive spécifique si elle est utilisée comme #foo="bar" lorsque la bar est
 @Directive({ // or @Component ... exportAs: 'bar' }) 

Une telle variable de modèle peut être référencée dans des liaisons de modèles ou dans des requêtes d’éléments telles que

 @ViewChild('searchBox') searchBox:HTMLInputElement; 

De angulartraining.com :

Les variables de référence des modèles sont un petit bijou qui permet de faire beaucoup de bonnes choses avec Angular. J’appelle généralement cette fonctionnalité “la syntaxe hashtag” car, bien, elle repose sur un simple hashtag pour créer une référence à un élément dans un template:

  

La syntaxe ci-dessus est relativement simple: elle crée une référence à l’élément d’ entrée pouvant être utilisé ultérieurement dans mon modèle. Notez que la scope de cette variable est le modèle HTML complet dans lequel la référence est définie.

Voici comment je pourrais utiliser cette référence pour obtenir la valeur de l’entrée, par exemple:

   

Notez que le téléphone fait référence à l’ instance d’ object HTMLElement pour l’ entrée . Par conséquent, le téléphone possède toutes les propriétés et les méthodes de tout object HTMLElement (identifiant, nom, innerHTML, valeur, etc.).

Ce qui précède est un bon moyen d’éviter d’utiliser ngModel ou un autre type de liaison de données sous une forme simple qui ne nécessite pas beaucoup de validation.


Est-ce que cela fonctionne aussi avec des composants?

La réponse est oui!

… la meilleure partie est que nous obtenons une référence à l’occurrence réelle du composant, HelloWorldComponent, afin que nous puissions accéder à toutes les méthodes ou propriétés de ce composant (même si elles sont déclarées comme privées ou protégées, ce qui est surprenant) :

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

[…]

   {{helloComp.name}}