Angular 2 por qué asterisco (*)

En el documento angular 2, * y la plantilla , sabemos que * ngIf, * ngSwitch, * ngFor se puede expandir a la etiqueta ng-template. Mi pregunta es:

Creo que el ngIfo ngForsin *también se puede traducir y expandir a una etiqueta de plantilla por motor angular.

El siguiente código

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

sería lo mismo que

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

Entonces, ¿por qué molestarse en diseñar un asterisco de símbolo extraño ( *) en el angular 2?

La sintaxis de Asterisk es un azúcar sintético para una sintaxis de plantilla más prolija que la directiva se expande debajo del capó, usted es libre de usar cualquiera de estas opciones.

Cita de los documentos :

El asterisco es "azúcar sintáctico". Simplifica ngIf y ngFor tanto para el escritor como para el lector. Bajo el capó, Angular reemplaza la versión de asterisco con una forma más detallada.

Los siguientes dos ejemplos de ngIf son efectivamente iguales y podemos escribir en cualquier estilo:

<!-- 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 ofrece un tipo especial de directivas: directivas estructurales

Las directivas estructurales se basan en la <template>etiqueta.

El *antes del selector de atributos indica que se debe aplicar una directiva estructural en lugar de una directiva de atributo normal o un enlace de propiedad. Angular2 expande internamente la sintaxis a una <template>etiqueta explícita .

Desde final también existe el <ng-container>elemento que se puede usar de manera similar a la <template>etiqueta, pero admite la sintaxis abreviada más común. Esto es necesario, por ejemplo, cuando dos directivas estructurales deben aplicarse a un solo elemento, que no está respaldado.

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

Angular trata los elementos de la plantilla de una manera especial. La *sintaxis es un atajo que le permite anular la escritura de todo el <template>elemento. Dejame mostrarte como funciona.

usando esto

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

lo quita el azúcar en

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

que elimina el azúcar en

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

también las directivas estructurales de angular como ngFor, ngIf, etc., con el prefijo *solo para diferenciar de estas directivas y componentes personalizados

ver más aquí

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

De los documentos de Angular :

Las directivas estructurales son responsables del diseño HTML. Dan forma o remodelan la estructura del DOM, generalmente agregando, quitando o manipulando elementos.

Al igual que con otras directivas, aplica una directiva estructural a un elemento host . Luego, la directiva hace lo que se supone que debe hacer con ese elemento de host y sus descendientes.

Las directivas estructurales son fáciles de reconocer. Un asterisco (*) precede al nombre del atributo de la directiva como en este ejemplo.

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

A veces, es posible que necesite, <a *ngIf="cond">por ejemplo, cuando es solo una etiqueta. a veces, es posible que desee colocar ngIf alrededor de varias etiquetas sin tener una etiqueta real como envoltorio que lo lleve a <template [ngIf]="cond">etiquetar. ¿Cómo puede saber angular si debería representar el propietario de la directiva ngIf en el resultado final html o no? por lo que es algo más que aclarar el código. es una diferencia necesaria.