jak używać Ng-Template w Angular?

ng-template jest elementem kątowym używanym do renderowania szablonów HTML.

używamyng-template z dyrektywą kątową*ngIf, aby wyświetlićelse szablon.

więc co dokładnie zrobi ten ng-template?

Czy naprawdę renderuje szablon HTML, zobaczymy na przykładzie.

<div> ng-template works!</div><ng-template>Inside ng-template tag</ng-template>

Jeśli zobaczysz wyjście, wyświetli tylkong-template works, który znajduje się w elemencie div.I spójrz na wygenerowany kod źródłowy HTML.

zamiast znacznikang-template możesz zobaczyć pustą sekcję komentarza. Przejdźmy głęboko do ng-template, aby zrozumieć to zachowanie.

co to jest ng-template w Angular

1. ng-template jest elementem wirtualnym i jego zawartość jest wyświetlana tylko wtedy, gdy jest potrzebna (na podstawie warunków).
2. ng-template powinien być używany wraz z dyrektywami strukturalnymi, takimi jak, lub niestandardowe dyrektywy strukturalne.Dlatego w powyższym przykładzie nie wyświetla się zawartość ng-template.
3. ng-template nigdy nie miało być używane jak inne elementy HTML. To wewnętrzna implementacja dyrektyw strukturalnych Angulara.
4. kiedy używasz dyrektywy strukturalnej w Angular dodamy przedrostek asterisk (*) przed nazwą dyrektywy. Ta gwiazdka jest krótkim zapisem ręki dla ng-template.
5. ilekroć Angular spotyka się z symbolem gwiazdki (*), informujemy Angular mówiąc, że jest to dyrektywa strukturalna i Angular zamieni atrybut dyrektywy na ng-template element.
6. ng-template nie jest do końca prawdziwym elementem sieci. Kiedy skompilujemy nasz kod, nie zobaczymy znacznika ng-template w HTML DOM.
7. Angular oceni elementng-template, aby przekonwertować go na sekcję komentarzy w HTML DOM.

przejdziemy przez różne dyrektywy strukturalne, takie jak*ngIf*ngForI, aby zrozumieć to dalej.

używając ng-template z przykładem *ngif

wykonaj egzamin z dyrektywy *Ngif w Angular

<div *ngIf="display" class="ng-template-example"> ng-template example</div><ng-template ="display"> <div class="ng-template-example">ng-template example</div></ng-template>

• dyrektywa jest konwertowana na członka danychng-template
• element szablonu inline wraz z atrybutami (Klasa itp.), przeniesiony wewnątrzng-template element

mamy więc tylkothen szablon, który jest szablonem wbudowanym i nie maelse szablon.Teraz zagłębimy się w kod źródłowy klasy NgIf, aby zrozumieć, jak będzie działał elementng-template.

każda dyrektywa strukturalna w Angular będzie miała dwie właściwości

1. TemplateRef
2. ViewContainerRef

dyrektywa strukturalna tworzy widok zng-template I wstawia go do kontenera widoku przylegającego do elementu hosta dyrektywy.

oznacza to, że dyrektywa strukturalna umożliwia dostęp do zawartości ng-template poprzez TemplateRef i aktualizuje ViewContainerRef

i jeśli widzisz powyższe źródło Kod klasy ngif ma cztery właściwości

1. _thentemplateref : ng-template Referencja then
2. _elsetemplateref : ng-template Referencja else
3. _THENVIEWREF : wbudowany widok ref of then
4. _elseviewref : wbudowany widok ref of else

Jeśli widzisz konstruktora, ma on dwa parametry private _viewContainer: ViewContainerRef and _templateRef: TemplateRef<NgIfContext>

Konstruktor uzyska dostęp do ng-template poprzez templateRef parametr i przypisze go do thenTemplateRefdiv>. szablon inline będzie domyślnym szablonem w dyrektywie ngIf.

i w powyższym przykładzie nie przekazujemy żadnych innych lub potem szablonów, a jedyne wejście, które podajemy, to

w oparciu o warunek, który aktualizujemy widok. Zobacz kod źródłowy updateView() metody NgIf klasy.

w metodzie update view Angular przypiszethenViewRef do osadzonego widoku utworzonego zthenTemplateRef i.e, widok z ng-template

więc jeśli warunek display jest prawdziwy strona internetowa wyświetla I am Visible.

i jeśli widzisz wygenerowany HTML ng-template jest konwertowany do sekcji komentarza, która daje informacje o ocenianym warunku.

jeśli przekażemy else szablon jest przypisywany do elseTemplateRef

jeśli warunek jest false w updateView() metoda Angular przypisze elseViewRef do wbudowany widok utworzony z elseTemplateRef

i możemy dynamicznie zmienić inny lub inny szablon runtime poprzez aktualizację i odwołania do szablonu

za pomocą ng-template z *ngdla przykładu

możesz myśleć, że dlaczego musimy użyć gwiazdki(*) zapis, kiedy możemy użyć ng-template elementu bezpośrednio. Tak, możemy użyć ng-template zamiast krótkiej notacji ręki.

*ngif jest prostą dyrektywą bez większej złożoności. Ta notacja gwiazdkowa lub mikrosyntaks (w kategoriach kątowych) jest bardzo przydatna dla złożonych dyrektyw strukturalnych, takich jak *ngFor. Spójrz na poniższy przykład

<div *ngFor="let task of tasks; let i=index; let even=even; trackBy: trackById"> ({{i}}) {{task.name}}</div><ng-template ngFor let-task ="tasks" let-i="index" let-even="even" ="trackById"><div>({{i}}) {{task.name}}</div></ng-template>

z notacją asterisk lub Mikrosyntaksą kątową możemy podać instrukcje do dyrektywy w formacie prostego łańcucha. A parser Angular microsyntax konwertuje ten łańcuch na atrybuty ng-template jak pokazano powyżej

nie chcę wchodzić w szczegóły implementacji *ngFor. Wszystko, co musimy zrozumieć, to notacja z gwiazdką ( * ) łatwa do napisania i zrozumienia.

dopóki nie masz dobrego powodu, preferuj notację gwiazdkową(*) zamiast ng-template

używanie ng-template z przykładem Ngswitcha

NgSwitch nie jest pojedynczą dyrektywą, jest ona używana wraz z innymi dyrektywami *ngSwitchCase jeśli widzisz powyższy kod, nie używałem wcześniej gwiazdki ngSwitch

spójrz na poniższy ngSwitchprzykład

<div ="Course"> <p *ngSwitchCase="'Angular'">Angular Course</p> <p *ngSwitchCase="'TypeScript'">TypeScript Course</p> <p *ngSwitchCase="'JavaScript'">JavaScript Course</p> <p *ngSwitchDefault>HTML Course</p> </div><div ="Course"> <ng-template *ngSwitchCase="'Angular'"> <p>Angular Course</p> </ng-template> <ng-template ="'TypeScript'"> <p>TypeScript Course</p> </ng-template> <ng-template ="'JavaScript'"> <p>JavaScript Course</p> </ng-template> <ng-template > <p>HTML Course</p> </ng-template></div>

Jeśli widzisz powyższy kod, nie używałem wcześniej gwiazdki ngSwitchdlaczego, ponieważ, ngswitch nie jest dyrektywą strukturalną. Jest to dyrektywa atrybutowa.

NgSwitch kontroluje zachowanie dwóch pozostałych dyrektyw przełączników ngSwitchCaseI ngSwitchDefault.

zarównongSwitchCasengSwitchDefault są dyrektywami strukturalnymi, dlatego przed nimi użyłem asterisk. I te zostaną przekonwertowane na ng-template elementy

podsumowanie

mam nadzieję, że rozumiesz, co to jest ng-template w Angular i dlaczego jest to przydatne. Jeśli piszesz własne dyrektywy strukturalne, powinieneś mieć jasne pojęcie o ng-template>

w następnym artykule wyjaśnię, jak napisać niestandardową dyrektywę strukturalną za pomocą ng-template