Quelle est la différence entre les parenthèses, les crochets et les astérisques dans Angular2?

J'ai lu la référence rapide Angular 1 à 2 sur le site Web Angular , et une chose que je ne comprenais pas complètement était la différence entre ces caractères spéciaux. Par exemple, celui qui utilise des astérisques:

<tr *ngFor="#movie of movies">
  <td>{{movie.title}}</td>
</tr>

Je comprends ici que le symbole dièse (#) se définit moviecomme une variable de modèle locale, mais que signifie l'astérisque avant ngFor? Et, est-ce nécessaire?

Ensuite, sont les exemples qui utilisent des crochets:

<a [routerLink]="['Movies']">Movies</a>

Je comprends un peu que les crochets autour le routerLinklient à cet attribut HTML / directive angulaire. Cela signifie-t-il qu'ils sont un pointeur pour Angular pour évaluer une expression? Comme [id]="movieId"serait l'équivalent de id="movie-{{movieId}}"dans Angular 1?

Enfin, les parenthèses:

<button (click)="toggleImage($event)">

Sont-ils uniquement utilisés pour les événements DOM et pouvons-nous utiliser d'autres événements comme (load)="someFn()"ou (mouseenter)="someFn()"?

Je suppose que la vraie question est la suivante: ces symboles ont-ils une signification particulière dans Angular 2, et quelle est la façon la plus simple de savoir quand utiliser chacun d'eux ? Merci!!

Tous les détails peuvent être trouvés ici: https://angular.io/docs/ts/latest/guide/template-syntax.html

• directiveName- est la forme abrégée des directives structurelles où la forme longue ne peut être appliquée qu'aux <template>balises. La forme courte enveloppe implicitement l'élément où elle est appliquée dans un fichier <template>.

• [prop]="value"est pour la liaison d'objet aux propriétés ( @Input()d'un composant ou d'une directive angulaire ou d'une propriété d'un élément DOM).
  Il existe des formes spéciales:

  • [class.className] se lie à une classe css pour l'activer / la désactiver
  • [style.stylePropertyName] se lie à une propriété de style
  • [style.stylePropertyName.px] se lie à une propriété de style avec une unité prédéfinie
  • [attr.attrName] lie une valeur à un attribut (visible dans le DOM, alors que les propriétés ne sont pas visibles)
  • [role.roleName] se lie à l'attribut de rôle ARIA (pas encore disponible)

• prop="{{value}}"lie une valeur à une propriété. La valeur est stringifiée (aka interpolation)

• (event)="expr"lie un gestionnaire d'événements à un @Output()événement ou DOM

• #varou #vara des fonctions différentes selon le contexte

  • Dans une *ngFor="#x in y;#i=index"portée, des variables pour l'itération sont créées
    (dans la version bêta.17, cela est changé en * ngFor = "let x in y; let i = index" `)
  • Sur un élément DOM <div #mydiv>une référence à l'élément
  • Sur un composant angulaire une référence au composant
  • Sur un élément qui est un composant angulaire ou qui a une directive angulaire où exportAs:"ngForm"est définie, #myVar="ngForm"crée une référence à ce composant ou directive.

[]- Liaison de propriété Unidirectionnelle de la source de données à la cible d'affichage. par exemple

{{expression}}
[target]="expression"
bind-target="expression"

Nous pouvons utiliser bind- au lieu de []

()-> Liaison d'événement unidirectionnelle de la cible de la vue à la source de données

(target)="statement"
on-target="statement"

Nous pouvons utiliser on- au lieu de ()

[()]- Banane à reliure bidirectionnelle dans une boîte

[(target)]="expression"
bindon-target="expression"

Nous pouvons utiliser bindon- au lieu de [()]

Comme déjà mentionné, la documentation Angular, en particulier le "tutoriel héros", explique cela plus en profondeur. Voici le lien si vous souhaitez le vérifier .

Les parenthèses sont des événements de l'élément sur lequel vous travaillez, comme le clic sur un bouton comme votre exemple; cela peut également être mousedown, keyup, onselect ou toute action / événement pour cet élément, et ce qui se trouve après le =est le nom de la méthode à appeler - en utilisant la parenthèse pour l'appel. Cette méthode doit être définie sur votre classe de composant, c'est-à-dire:

<element (event)="method()"></element>

Les parenthèses fonctionnent dans l'autre sens. Ils doivent obtenir des données de votre classe - le contraire de la parenthèse qui envoyait l'événement - donc un exemple courant est l'utilisation d'un style comme celui-ci:

<element [ngStyle]="{display:someClassVariable}">

Voir? Vous donnez à l'élément un style basé sur votre modèle / classe.

Pour cela, vous auriez pu utiliser ...

<element style="display:{{ModelVariable}};">

La recommandation est que vous utilisiez des doubles accolades pour les choses que vous imprimerez à l'écran comme:

<h1>{{Title}}</h1>

Quoi que vous utilisiez, si vous êtes cohérent, cela contribuera à la lisibilité de votre code.

Enfin, pour votre *question, c'est une explication plus longue, mais elle est TRÈS TRÈS importante: elle résume l'implémentation de certaines méthodes que vous auriez autrement à faire pour faire fonctionner un ngFor.

Une mise à jour importante est que ngForvous n'utiliserez plus de hachage; vous devez utiliser à la letplace comme suit:

<tr *ngFor="let movie of movies">
    <td>{{movie.title}}</td>
</tr>

Une dernière chose à mentionner est que tout ce qui précède s'applique également à vos composants, par exemple si vous créez une méthode dans votre composant, elle sera appelée en utilisant ():

<my-owncomponent 
    (onSearched)="MethodToCall()" 
    [MyInputData]="SearchParamsArray"></my-owncomponent>