W dokumencie Angular 2 * i szablonie wiemy, że * ngIf, * ngSwitch, * ngFor można rozszerzyć do tagu ng-template. Moje pytanie brzmi:
Myślę, że ngIf
lub ngFor
bez *
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?
javascript
angular
angular-directive
maxisacoder
źródło
źródło
<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.Odpowiedzi:
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 :
źródło
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ć ongIf
szczegó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.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>
źródło
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ówzobacz więcej tutaj
https://vsavkin.com/angular-2-template-syntax-5f2ee9f13c6a#.rcffirs7a
źródło
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.
Dyrektywy strukturalne są łatwe do rozpoznania. Gwiazdka (*) poprzedza nazwę atrybutu dyrektywy, tak jak w tym przykładzie.
<p *ngIf="userInput">{{username}}</p>
źródło
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.źródło