Que signifie "hashtags" dans un modèle Angular 2 ?

Question

Je travaille avec angular 2 et j'ai trouvé quelque chose du genre

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

et ça marche.

Cependant, je ne comprends pas la signification de #searchBox . Je n'ai rien trouvé de clair non plus dans la doc.

Quelqu'un peut-il m'expliquer comment cela fonctionne ?

Answer 1

Il s'agit d'une syntaxe utilisée dans le système de création de modèles d'Angular 2 qui déclare les éléments du DOM comme des variables.

Ici, je donne à mon composant une URL de modèle :

import {Component} from 'angular2/core';

@Component({
   selector: 'harrys-app',
   templateUrl: 'components/harry/helloworld.component.html'
})

export class HarrysApp {}

Les modèles rendent le HTML. Dans un modèle, vous pouvez utiliser la liaison de données, de propriétés et d'événements. Ceci est réalisé avec la syntaxe suivante :

# - déclaration de variable

() - liaison avec les événements

[] - liaison de propriété

[()] - liaison bidirectionnelle des propriétés

{{ }} - interpolation

* - directives structurelles

El # permet de déclarer des noms de variables locales qui font référence à des objets DOM dans un modèle. Par exemple

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

Answer 2

Lorsque vous définissez cette #searchBox, vous pouvez obtenir cette entrée dans votre type de script comme suit

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

EDIT

Ajout d'un exemple : https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview

Answer 3

De angulartraining.com :

Variables de référence du modèle sont un petit bijou qui permet de faire beaucoup de choses intéressantes avec Angular. J'ai l'habitude d'appeler cette fonctionnalité "la syntaxe hashtag" parce que, eh bien, elle s'appuie sur un simple hashtag pour créer une référence à un élément dans un template :

<input #phone placeholder="phone number">

Ce que fait la syntaxe ci-dessus est assez simple : Elle crée une référence à l'objet  entrée qui pourra être utilisé plus tard dans mon modèle. Notez que la portée de cette variable est l'ensemble du modèle HTML 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 :

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

Notez que  téléphone  fait référence à la  HTMLElement pour l'instance de l'objet  entrée . En conséquence,  téléphone  possède toutes les propriétés et méthodes de tout HTMLElement (id, name, innerHTML, value, etc.).

Ce qui précède est un bon moyen d'éviter l'utilisation de ngModel ou d'un autre type de liaison de données dans un formulaire simple qui ne nécessite pas beaucoup de validation.

---

Cela fonctionne-t-il également avec les composants ?

La réponse est OUI !

... le plus intéressant est que nous obtenons une référence à l'instance réelle du composant, HelloWorldComponent, et que nous pouvons donc accéder à toutes les méthodes et 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';
}

[...]

<app-hello #helloComp></app-hello>

<!-- The following expression displays "Angular" -->
{{helloComp.name}}

Answer 4

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

• le site input si l'élément est un élément DOM ordinaire
• l'instance du composant ou de la directive s'il s'agit d'un élément avec un composant ou une directive

• un composant ou une directive spécifique s'il est utilisé comme #foo="bar" quand 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;