Angular 2 pourquoi astérisque (*)

Dans le document angular 2, * et le modèle , nous savons que les balises * ngIf, * ngSwitch, * ngFor peuvent être développées en balise ng-template. Ma question est:

Je pense que le ngIfou ngForsans *peut également être traduit et développé en balise de modèle par le moteur angulaire.

Le code suivant

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

serait le même que

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

Alors pourquoi se donner la peine de concevoir un astérisque de symbole étrange ( *) en angulaire 2?

La syntaxe Asterisk est un sucre syntaxique pour une syntaxe de modèle plus verbeuse à laquelle la directive se développe sous le capot, vous êtes libre d'utiliser l'une de ces options.

Citation de la documentation :

L'astérisque est «sucre syntaxique». Il simplifie ngIf et ngFor pour l'écrivain et le lecteur. Sous le capot, Angular remplace la version astérisque par une forme plus verbeuse.

Les deux exemples suivants de ngIf sont effectivement les mêmes et nous pouvons écrire dans les deux styles:

<!-- 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>

Angular2 propose un type spécial de directives - Directives structurelles

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

L' *avant 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 développe en interne la syntaxe en une <template>balise explicite .

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

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

Angular traite les éléments du modèle d'une manière spéciale. La *syntaxe est un raccourci qui vous permet d'annuler l'écriture de l' <template>élément entier . Laissez-moi vous montrer comment cela fonctionne.

en utilisant ceci

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

le désucre en

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

qui désucre en

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

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

voir plus ici

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

À partir de la documentation Angular :

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

Comme avec les autres directives, vous appliquez une directive structurelle à un élément hôte . La directive fait alors tout 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 directive comme dans cet exemple.

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

Parfois, vous pouvez avoir besoin, <a *ngIf="cond">par exemple, lorsqu'il ne s'agit que d'une seule balise. Parfois, vous voudrez peut-être placer le ngIf autour de plusieurs balises sans avoir une vraie balise comme wrapper qui vous amène à la <template [ngIf]="cond">balise. comment angular peut-il savoir s'il doit rendre le propriétaire de la directive ngIf dans le résultat final html ou non? c'est donc plus que simplement rendre le code plus clair. c'est une différence nécessaire.