web-dev-qa-db-fra.com

Que signifie Angular 2 hashtags 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 non plus dans la doc.

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

Merci

javascripthtmlhtml5angulartypescript
100
ackuser

C'est la syntaxe utilisée dans le système de templates Angular 2 qui déclare les éléments dom en tant que 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 HTML. Dans un modèle, vous pouvez utiliser des liaisons de données, de propriétés et d’événements. Ceci se produit avec le code 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 faisant référence à des objets DOM dans un modèle. Par exemple.

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

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

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

EDIT

Ajout de quelques exemples: https://plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=preview

48
Matheus Martins

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

  • l'élément input si l'élément est un élément DOM simple
  • l'instance de composant ou de 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" lorsque 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;
18
Günter Zöchbauer

De angulartraining.com :

Les variables de référence du modèle sont un petit bijou qui permet de faire beaucoup de choses agréables avec Angular. J'appelle généralement cette fonctionnalité "la syntaxe de hashtag", car elle repose sur un simple hashtag pour créer une référence à un élément dans un modèle:

<input #phone placeholder="phone number">

La syntaxe décrite ci-dessus est assez simple: elle crée une référence à l'élément input ​​qui pourra être utilisée ultérieurement 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 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 à l'instance d'objet HTMLElement pour entrée. En conséquence, téléphone possède toutes les propriétés et méthodes de tout HTMLElement (id, 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 dans un formulaire simple qui n’exige pas grand chose en termes 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'instance du composant réel, HelloWorldComponent, afin que nous puissions accéder aux 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';
}

[...]

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

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