Angular 2 porque asterisco (*)

No angular 2 document, * e template , sabemos que * ngIf, * ngSwitch, * ngFor pode ser expandido para a tag ng-template. Minha pergunta é:

Acho que ngIfou ngForsem *também pode ser traduzido e expandido para tag de modelo pelo motor angular.

O seguinte código

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

seria o mesmo que

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

Então, por que se preocupar em projetar um símbolo estranho asterisco ( *) no angular 2?

A sintaxe do asterisco é um açúcar sintático para uma sintaxe de modelo mais prolixo, cuja diretiva se expande para o interior, você está livre para usar qualquer uma dessas opções.

Citação dos documentos :

O asterisco é "açúcar sintático". Ele simplifica o ngIf e o ngFor tanto para o escritor quanto para o leitor. Sob o capô, o Angular substitui a versão com asterisco por uma forma mais detalhada.

Os próximos dois exemplos ngIf são efetivamente os mesmos e podemos escrever em qualquer um dos estilos:

<!-- 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 oferece um tipo especial de diretivas - diretivas estruturais

As diretivas estruturais são baseadas na <template>tag.

O *antes do seletor de atributo indica que uma diretiva estrutural deve ser aplicada em vez de uma diretiva de atributo normal ou associação de propriedade. Angular2 expande internamente a sintaxe para uma <template>tag explícita .

Desde o final, há também o <ng-container>elemento que pode ser usado de forma semelhante à <template>tag, mas suporta a sintaxe abreviada mais comum. Isso é necessário, por exemplo, quando duas diretivas estruturais devem ser aplicadas a um único elemento, o que não é suportado.

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

O Angular trata os elementos do template de uma maneira especial. A *sintaxe é um atalho que permite cancelar a escrita de todo o <template>elemento. Deixe-me mostrar como funciona.

usando isso

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

de-açúcar em

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

que de-açúcar em

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

também as diretivas estruturais do angular como ngFor, ngIf etc. prefixadas por *apenas para diferenciar dessas diretivas e componentes personalizados

veja mais aqui

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

De documentos Angular :

As diretivas estruturais são responsáveis ​​pelo layout HTML. Eles moldam ou remodelam a estrutura do DOM, geralmente adicionando, removendo ou manipulando elementos.

Como acontece com outras diretivas, você aplica uma diretiva estrutural a um elemento host . A diretiva então faz tudo o que é suposto fazer com aquele elemento host e seus descendentes.

As diretivas estruturais são fáceis de reconhecer. Um asterisco (*) precede o nome do atributo de diretiva como neste exemplo.

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

Às vezes você pode precisar, <a *ngIf="cond">por exemplo, quando é apenas uma tag. às vezes você pode querer colocar o ngIf em torno de várias tags sem ter uma tag real como um wrapper que o leva a <template [ngIf]="cond">tag. como o angular pode saber se deve renderizar o proprietário da diretiva ngIf no html do resultado final ou não? então é algo mais do que apenas tornar o código mais claro. é uma diferença necessária.