Angular 2 dlaczego gwiazdka (*)

90

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?

maxisacoder
źródło
Z linku nie widzieliśmy <template>tagów, ponieważ *składnia prefiksu pozwoliła nam pominąć te tagi i skupić się bezpośrednio na elemencie HTML, który włączamy, wykluczamy lub powtarzamy.
Tushar
3
To Ty decydujesz, czy chcesz użyć tagu szablonu bezpośrednio, w innym przypadku możesz użyć *, który zajmie się tagiem szablonu za Ciebie. - Źródło
Tushar,

Odpowiedzi:

89

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>
Klaster_1
źródło
tak mówi dokument. Przepraszam za niedokładne wyrażenia mojego znaczenia, zmieniłem szczegół pytania.
maxisacoder
2
Chodzi mi o to, po co projektować ten cukier, dlaczego po prostu rozszerzać domyślnie bez użycia *.
maxisacoder
2
Jest kilka powodów, dla których przychodzi mi do głowy: 1. ngIf="expression"nie jest wiążącą wartością wejściową. Jeśli otrzymasz wartość z DOM, będzie to ciąg. 2. Framework będzie musiał wiedzieć o ngIfszczególnym przypadku i innych przypadkach. Jasne, określenie atrybutu boolowskiego gdzieś w DDO wystarczy, ale musisz zajrzeć do kodu / dokumentów, aby poznać różnicę między zwykłym atrybutem a cukrem dyrektywy strukturalnej. 3. Nawiasy kwadratowe, gwiazdka, nawiasy i ich brak wyraźnie propagują to, co się dzieje w czytniku szablonów.
Klaster_1
1
Dlaczego to działało bez gwiazdki w ng1, aby napisać ng-if, ng-show itp.?
RubberDuckRabbit
1
@RubberDuckRabbit, ponieważ ng1 ma zupełnie inną implementację wiązania. Został przeprojektowany dla ng2 +.
Klaster_1
32

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>
Günter Zöchbauer
źródło
21

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

Pardeep Jain
źródło
3

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>
coderpc
źródło
2

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.

Dariush Alipour
źródło