Angular 2 pourquoi astérisque (*)


90

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?


À partir du lien, nous n'avons pas vu les <template>balises car la *syntaxe du préfixe nous permettait d'ignorer ces balises et de nous concentrer directement sur l'élément HTML que nous incluons, excluons ou répétons.
Tushar


3
Vous avez le choix d'utiliser directement la balise template, sinon vous pouvez utiliser le * qui s'occupe de la balise template pour vous. - Source
Tushar

Réponses:


89

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>

c'est ce que dit le document. Désolé pour les expressions inexactes de ma signification, j'ai changé le détail de la question.
maxisacoder

2
Je veux dire pourquoi concevoir ce sucre, pourquoi simplement développer par défaut sans utiliser *.
maxisacoder

2
Il y a plusieurs raisons auxquelles je peux penser: 1. ngIf="expression"n'est pas une liaison d'entrée. Si vous obtenez la valeur de DOM, ce sera une chaîne. 2. Le cadre devra connaître ngIfet d'autres étant le cas particulier. Bien sûr, spécifier un attribut booléen quelque part sur DDO fera l'affaire, mais vous devez consulter le code / la documentation afin de connaître la différence entre l'attribut normal et le sucre de directive structurelle. 3. Les crochets, les risques, les parenthèses et leur absence propagent clairement ce qui se passe dans le lecteur de modèles.
Klaster_1

1
Pourquoi a-t-il fonctionné sans astérisque dans ng1, pour écrire ng-if, ng-show, etc.?
RubberDuckRabbit

1
@RubberDuckRabbit car ng1 a une implémentation de liaison complètement différente. Il a été repensé pour ng2 +.
Klaster_1

32

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>

21

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


3

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

2

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.