hogyan kell használni az NG-sablont Angularban?

ng-template egy szögletes elem, amelyet HTML sablonok megjelenítésére használnak.

ang-templateangular*ngIfirányelvet használjuk aelse sablon megjelenítéséhez.

tehát pontosan mit fog tenni ez a ng-template?

hogy valóban teszi HTML sablon, látni fogjuk egy példát.

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

Ha látja a kimenetet, akkor csak ang-template works jelenik meg, amely a div elemben található.Vessen egy pillantást a generált HTML forráskódra.

a ng-template címke helyett egy üres megjegyzés rovatot láthat. Menjünk át mélyen ng-template hogy megértsük ezt a viselkedést.

mi az NG-sablon szögletes

1. ng-template egy virtuális elem, amelynek tartalma csak szükség esetén jelenik meg (feltételek alapján).
2. ng-template kell használni együtt szerkezeti irányelvek, Mint,, vagy egyéni szerkezeti Irányelvek.Ezért a fenti példában a ng-template tartalma nem jelenik meg.
3. ng-template soha nem azt jelentette, hogy más HTML elemekhez hasonlóan kell használni. Ez az Angular szerkezeti irányelveinek belső megvalósítása.
4. Ha szögletes szerkezeti irányelvet használ, akkor csillag(*) előtagot adunk az irányelv neve elé. Ez a csillag a ng-templaterövid kézi jelölése.
5. amikor Angular találkozik a csillag (*) szimbólummal, tájékoztatjuk Angular-t, hogy ez egy szerkezeti irányelv, az Angular pedig átalakítja az irányelv attribútumot ng-template elemgé.
6. ng-template nem éppen egy igazi webes elem. Amikor lefordítjuk a kódunkat ,nem fogunk látning-template címkét a HTML DOM-ban.
7. Angular kiértékeli ang-template elemet, hogy átalakítsa egy megjegyzés szakaszba a HTML DOM-ban.

a különböző strukturális irányelveket, mint például a *ngIf*ngForés hogy ezt tovább megértsük.

használata ng-sablon *ngIf példa

hogy egy examle *ngIf irányelv 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>

• az irányelv alakítjuk adatok tagja ng-template
• az inline sablon elem együtt attribútumok (osztály stb.), költözött belül a ng-template elem

tehát csak thensablon van, amely egy inline sablon, és nincs else sablon.Most ásni fog a NgIf osztály forráskódjába, hogy megértse, hogyan fog működni a ng-template elem.

minden Angular szerkezeti irányelvnek két tulajdonsága lesz

1. TemplateRef
2. ViewContainerRef

egy szerkezeti irányelv hozza létre a nézetet ng-template és beszúrja a direktíva host elem melletti nézettárolóba.

Ez azt jelenti, strukturális irányelv hozzáférést a tartalmát ng-template keresztül TemplateRef és frissíti a ViewContainerRef

és ha látja a fenti forrás az ngif osztály kódja négy tulajdonsággal rendelkezik

1. _thentemplateref : ng-template akkor hivatkozása
2. _elsetemplateref : ng-template más hivatkozása
3. _thenviewref : beágyazott nézet ref akkor
4. _elseviewref : beágyazott nézet ref of else

Ha látja a konstruktort, akkor két paramétere van private _viewContainer: ViewContainerRef and _templateRef: TemplateRef<NgIfContext>

a konstruktor a ng-template via templateRef paramétert fogja elérni, és hozzárendeli a thenTemplateRef. inline sablon lesz az alapértelmezett majd sablon ngIf irányelv.

és a fenti példában nem adunk át semmilyen más vagy majd sablont, és az egyetlen bemenet, amelyet adunk

a nézet frissítésének feltétele alapján. Lásd a updateView() módszer NgIf osztály forráskódját.

a frissítési nézetben az Angular a thenViewRef – t a thenTemplateRef – ből létrehozott beágyazott nézethez rendeli.E, megtekintés innen: ng-template

tehát, ha a feltétel display igaz a weboldal megjelenítése I am Visible.

és ha látja, hogy a létrehozott HTML ng-template egy megjegyzés szakaszba konvertálódik, amely az értékelt állapotra vonatkozó információkat tartalmazza.

ha átmegyünk else a sablont a elseTemplateRef

Ha a feltétel hamis a updateView() metódus Angular hozzárendeli elseViewRef a beágyazott nézet létre elseTemplateRef

és tudjuk dinamikusan változtatni mást, vagy majd sablonok futási frissítésével és sablon hivatkozások

segítségével ng-sablon *ngpéldául

lehet, hogy azt gondolja, hogy miért kell használni csillag(*) jelölés, amikor közvetlenül használhatjuk a ng-template elemet. Igen, használhatjuk ng-template rövid kézi jelölés helyett.

*az ngIf egy egyszerű irányelv, sok bonyolultság nélkül. Ez a csillagjelzés vagy a mikroszintax (szögletes értelemben) nagyon hasznos olyan összetett szerkezeti Irányelvek esetén, mint a *ngFor. Vessen egy pillantást az alábbi példára

<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>

a csillag jelöléssel vagy a szögletes microsyntax segítségével utasításokat adhatunk az irányelvnek egyszerű karakterlánc formátumban. Az Angular microsyntax elemző konvertálja ezt a karakterláncot a ng-template attribútumokká a fentiek szerint

nem akarok belemenni a *ngForimplementációs részleteibe. Csak annyit kell értenünk, hogy a csillag (*) jelölés könnyen írható és érthető.

amíg, hacsak nincs jó oka, inkább csillag(*) jelölés helyett ng-template

ng-sablon használata NgSwitch példával

NgSwitch nem egyetlen irányelv, hanem valójában más irányelvekkel együtt használják *ngSwitchCase és *ngSwitchDefault

vessen egy pillantást az alábbi ngSwitch példa

<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>

ha látja a fenti kódot nem használtam csillag előtt ngSwitch miért, mert az ngswitch nem strukturális irányelv. Ez egy attribútum irányelv.

az NgSwitch vezérli a másik két kapcsolási irányelvngSwitchCase ésngSwitchDefaultviselkedését.

mindkettő ngSwitchCasengSwitchDefault szerkezeti Irányelvek, ezért használtam csillag előttük. És ezek átalakulnak ng-template elemek

összefoglaló

remélem megérted, mi az ng-template szögletes és miért hasznos. Ha pedig saját szerkezeti irányelveket írsz, akkor világos elképzelésed kell legyen a ng-template>

a következő cikkemben elmagyarázom, hogyan kell egyedi szerkezeti irányelvet írni a ng-template