angular 2 pourquoi l'astérisque (*)

Question

Dans le document angulaire 2, * et modèle nous savons que les *ngIf, *ngSwitch, *ngFor peuvent être étendus à la balise template. Ma question est la suivante :

Je pense que le ngIf ou ngFor sans * peut également être traduit et étendu en balise de modèle par le moteur angulaire. Alors pourquoi s'embêter à concevoir un étrange symbole astérisque( * ) dans l'angle 2 ?

<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>

<template [ngIf]="currentHero">
  <hero-detail [hero]="currentHero"></hero-detail>
</template>

Answer 1

La syntaxe de l'astérisque est un sucre syntaxique pour la syntaxe plus verbeuse des modèles que la directive étend à sous le capot, vous êtes libre d'utiliser n'importe laquelle de ces options.

Citation du docs :

L'astérisque est un "sucre syntaxique". Il simplifie l'utilisation de ngIf et ngFor pour à la fois pour le rédacteur et pour le lecteur. Sous le capot, Angular remplace la version par une forme plus verbeuse.

Les deux exemples suivants de ngIf sont effectivement les mêmes et nous pouvons écrire dans l'un ou l'autre style :

<!-- Examples (A) and (B) are the same -->
<!-- (A) *ngIf paragraph -->
<p *ngIf="condition">
  Our heroes are true!
</p>

<!-- (B) [ngIf] with template -->
<template [ngIf]="condition">
  <p>
    Our heroes are true!
  </p>
</template>

Answer 2

Angular2 propose un type particulier de directives - le Directives structurelles

Les directives structurelles sont basées sur le <template> étiquette.

Le site * devant le sélecteur d'attribut indique qu'une directive structurelle doit être appliquée au lieu d'une directive d'attribut normale ou d'une liaison de propriété. Angular2 étend de manière interne la syntaxe à une directive explicite <template> étiquette.

Depuis la finale, il y a aussi le <ng-container> qui peut être utilisé de la même manière que l'élément <template> mais prend en charge la syntaxe abrégée la plus courante. Cela est par exemple nécessaire lorsque deux directives structurelles doivent être appliquées à un seul élément, ce qui n'est pas supporté pard.

<ng-container *ngIf="boolValue">
  <div *ngFor="let x of y"></div>
</ng-container>

Answer 3

Angular traite les éléments de modèle d'une manière particulière. Le site * est un raccourci qui vous permet d'éviter d'écrire toute la syntaxe <template> élément. Laissez-moi vous montrer comment cela fonctionne.

en utilisant ce

*ngFor="let t of todos; let i=index"

le désucre en

template="ngFor: let t of todos; let i=index" 

qui se déssucre en

<template ngFor [ngForOf]="todos" .... ></template>

ainsi que les directives structurelles d'angular comme ngFor, ngIf etc. préfixées par * juste pour différencier de ces directives et composants personnalisés

voir plus ici

https://vsavkin.com/angular-2-template-syntax-5f2ee9f13c6a#.rcffirs7a

Answer 4

De Documentation sur Angular :

Les directives structurelles sont responsables de la mise en page du HTML. Elles façonnent ou remodèlent la structure du DOM, généralement en ajoutant, supprimant ou manipulant des éléments.

Comme pour les autres directives, vous appliquez une directive structurelle à un fichier hôte élément . La directive fait alors ce qu'elle est censée faire avec cet élément hôte et ses descendants.

Les directives structurelles sont faciles à reconnaître. Un astérisque (*) précède le nom de l'attribut de la directive, comme dans cet exemple.

<p *ngIf="userInput">{{username}}</p>

Answer 5

Parfois, vous pouvez avoir besoin <a *ngIf="cond"> par exemple, lorsqu'il n'y a qu'une seule balise. Parfois, on peut vouloir placer le ngIf autour de plusieurs balises sans avoir une vraie balise comme enveloppe, ce qui conduit à <template [ngIf]="cond"> comment angular peut-il savoir s'il doit rendre le propriétaire de la directive ngIf dans le résultat final du html ou non ? il s'agit donc de quelque chose de plus que de rendre le code plus clair. c'est une différence nécessaire.