Angular 2 dlaczego gwiazdka (*)

W dokumencie Angular 2 * i szablonie wiemy, że * ngIf, * ngSwitch, * ngFor można rozszerzyć do tagu ng-template. Moje pytanie brzmi:

Myślę, że ngIflub ngForbez *można również przetłumaczyć i rozszerzyć na tag szablonu za pomocą silnika kątowego.

Poniższy kod

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

byłby taki sam jak

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

Po co więc zawracać sobie głowę projektowaniem dziwnego symbolu gwiazdki ( *) w angular 2?

Składnia gwiazdka jest cukrem składniowym dla bardziej rozwlekłej składni szablonów, której dyrektywa rozszerza się pod maskę, możesz swobodnie używać dowolnej z tych opcji.

Cytat z dokumentów :

Gwiazdka to „cukier syntaktyczny”. Upraszcza ngIf i ngFor zarówno dla autora, jak i czytelnika. Pod maską Angular zastępuje wersję z gwiazdką bardziej szczegółową formą.

Następne dwa ngJeśli przykłady są faktycznie takie same i możemy pisać w dowolnym stylu:

<!-- 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 oferuje specjalny rodzaj dyrektyw - dyrektywy strukturalne

Dyrektywy strukturalne są oparte na <template>tagu.

*Przed selektor atrybutu wskazuje, że dyrektywa strukturalne powinny być stosowane zamiast normalnego dyrektywy atrybutu lub wiązania nieruchomości. Angular2 wewnętrznie rozszerza składnię do jawnego <template>znacznika.

Od wersji ostatecznej istnieje również <ng-container>element, który może być używany podobnie do <template>tagu, ale obsługuje bardziej powszechną składnię short hand. Jest to wymagane na przykład, gdy dwie dyrektywy strukturalne mają być zastosowane do pojedynczego elementu, który nie jest obsługiwany.

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

Angular traktuje elementy szablonu w specjalny sposób. *Składnia jest skrótem, który pozwala unieważnić pisanie cały <template>element. Pokażę ci, jak to działa.

używając tego

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

usuwa cukry do

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

który usuwa cukry do

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

także dyrektywy strukturalne firmy angular, takie jak ngFor, ngIf itp. poprzedzone przedrostkiem, *aby odróżnić je od tych niestandardowych dyrektyw i komponentów

zobacz więcej tutaj

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

Z dokumentów Angular :

Dyrektywy strukturalne są odpowiedzialne za układ HTML. Kształtują lub zmieniają strukturę DOM, zazwyczaj poprzez dodawanie, usuwanie lub manipulowanie elementami.

Podobnie jak w przypadku innych dyrektyw, dyrektywę strukturalną stosuje się do elementu hosta . Dyrektywa robi wtedy wszystko, co powinna zrobić z tym elementem hosta i jego potomkami.

Dyrektywy strukturalne są łatwe do rozpoznania. Gwiazdka (*) poprzedza nazwę atrybutu dyrektywy, tak jak w tym przykładzie.

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

Czasami możesz potrzebować <a *ngIf="cond">na przykład, gdy jest to tylko jeden tag. czasami możesz chcieć umieścić ngIf wokół wielu tagów bez prawdziwego tagu jako opakowania, które prowadzi cię do <template [ngIf]="cond">tagu. Skąd Angular może wiedzieć, czy powinien wyświetlać właściciela dyrektywy ngIf w ostatecznym wyniku html, czy nie? jest to więc coś więcej niż tylko uczynienie kodu bardziej przejrzystym. to konieczna różnica.