Bio je to jedan od onih dana kad sam bio zauzet radom na novim značajkama za svoj uredski projekt. Odjednom mi je nešto privuklo pažnju:
Tijekom pregleda DOM-a vidio sam kako je ngcontentAngular primijenio na elemente. Hmm ... ako sadrže elemente u konačnom DOM-u, što onda koristi ? U to sam se vrijeme zbunio između i .
U potrazi za odgovorima na svoja pitanja otkrio sam koncept . Na moje iznenađenje, bilo je i toga *ngTemplateOutlet. Započeo sam putovanje tražeći jasnoću oko dva koncepta, ali sada sam ih imao četiri, zvuče gotovo isto!
Jeste li ikad bili u ovoj situaciji? Ako da, onda ste na pravom mjestu. Dakle, bez daljnjega, uzmimo ih jednog po jednog.
1.
Kao što ime sugerira je predložak element koji Kutna koristi sa strukturnim direktiva ( *ngIf, *ngFor, [ngSwitch]i prilagođene direktive).
Ovi elementi predloška rade samo u prisutnosti strukturnih direktiva . Angular omotava element domaćina (na koji se primjenjuje direktiva) unutrai trošigotov DOM zamjenjujući ga dijagnostičkim komentarima.
Razmotrimo jednostavan primjer *ngIf:
Gore je prikazano Kutno tumačenje *ngIf. Angular stavlja element hosta na koji se direktiva primjenjuje unutar i zadržava hosta kakav jest. Konačni DOM sličan je onome što smo vidjeli na početku ovog članka:
Upotreba:
Vidjeli smo kako Angular koristi, ali što ako ga želimo koristiti? Kako ti elementi rade samo sa strukturnom direktivom, možemo zapisati kao:
Ovdje homeje booleansvojstvo komponente koja je postavljena na truevrijednost. Izlaz gornjeg koda u DOM-u:
Ništa nije prikazano! :(
Ali zašto ne možemo vidjeti svoju poruku čak i nakon ispravne uporabe sa strukturnom direktivom?
Ovo je bio očekivani rezultat. Kao što smo već razgovarali, Angular zamjenjuje dijagnostičkim komentarima. Nema sumnje da gornji kod ne bi generirao nikakvu pogrešku, jer je Angular sasvim u redu s vašim slučajem upotrebe. Nikad ne biste saznali što se točno dogodilo iza kulisa.
Usporedimo gornja dva DOM-a koja je prikazao Angular:
Ako pažljivo promatrate, postoji jedna dodatna oznaka komentara u konačnom DOM-u primjera 2 . Kôd koji je Angular protumačio bio je:
Angular je zamotao vašeg domaćina u drugi i pretvorio ne samo vanjski u dijagnostičke komentare već i unutarnji! Zbog toga niste mogli vidjeti nijednu svoju poruku.
Da biste se riješili ovoga, dva su načina da postignete željeni rezultat:
Metoda 1:
Ovom metodom Angularu dajete odšećereni format koji ne treba daljnju obradu. Ovaj će se put Angular pretvoriti samo u komentare, ali sadržaj u njemu ostavlja netaknutim (oni više nisu unutra kao što je bio u prethodnom slučaju). Stoga će ispravno prikazati sadržaj.
Da biste saznali više o tome kako koristiti ovaj format s ostalim strukturnim smjernicama, pogledajte ovaj članak.
Metoda 2:
Ovo je prilično neviđen format i rijetko se koristi (pomoću dva brata ili sestre ). Ovdje dajemo referencu predložak u *ngIfu ITS thento reći koji predložak treba koristiti ako je uvjet istinit.
Ne preporučuje se korištenje višestrukih poput ovih ( umjesto njih biste mogli koristiti ) jer ovo nije ono čemu su namijenjeni. Koriste se kao spremnik za predloške koji se mogu ponovno koristiti na više mjesta. O tome ćemo više pokriti u kasnijem odjeljku ovog članka.
2.
Jeste li ikad napisali ili vidjeli kod sličan ovome:
Razlog zašto mnogi od nas pišu ovaj kôd je nemogućnost upotrebe višestrukih strukturnih direktiva na jednom glavnom elementu u Angulu. Sada ovaj kod dobro funkcionira, ali uvodi nekoliko dodatnih praznih u DOM ako item.idje lažna vrijednost koja možda neće biti potrebna.
Jednostavnog primjera poput ovog možda ne brine, ali za ogromnu aplikaciju koja ima složeni DOM (za prikaz desetaka tisuća podataka) ovo može postati problematično jer elementi mogu imati priključene slušatelje koji će i dalje biti tamo u DOM sluša događaje.
Što je još gore, to je razina gniježđenja koju morate učiniti da biste primijenili svoj styling (CSS)!
Bez brige, moramo spasiti!
Angular je element za grupiranje koji ne ometa stilove ili raspored jer ga Angular ne stavlja u DOM .
Dakle, ako svoj primjer 1 napišemo sa :
Konačni DOM dobivamo kao:
Vidite da smo se riješili tih praznih s. Trebali bismo koristiti kada samo želimo primijeniti više strukturnih direktiva bez uvođenja bilo kakvog dodatnog elementa u naš DOM.
Za više informacija pogledajte dokumente. Postoji još jedan slučaj upotrebe kada se koristi za dinamičko ubrizgavanje predloška u stranicu. O ovom ću slučaju govoriti u posljednjem odjeljku ovog članka.
3.
Koriste se za stvaranje komponenata koje se mogu konfigurirati. To znači da se komponente mogu konfigurirati ovisno o potrebama korisnika. Ovo je dobro poznato kao Projekcija sadržaja . Komponente koje se koriste u objavljenim knjižnicama koriste se kako bi se učinile konfigurabilnima.
Razmotrimo jednostavnu komponentu:
HTML sadržaj koji se prosljeđuje unutar početnih i završnih oznaka komponente je sadržaj koji se projicira. To je ono što nazivamo Projekcija sadržaja . Sadržaj će se prikazivati unutar komponente. To omogućava potrošaču komponente da proslijedi bilo koje prilagođeno podnožje unutar komponente i kontrolira točno kako želi da se ona generira.
Više projekcija:
Što ako možete odlučiti koji sadržaj treba smjestiti? Umjesto svakog sadržaja koji se projicira unutar jednog , također možete kontrolirati kako će se sadržaj projicirati s selectatributom . Potreban je selektor elemenata da odluči koji će se sadržaj projicirati unutar određenog .
Evo kako:
Izmijenili smo definiciju kako bismo izveli projekciju s više sadržaja. selectAtribut odabir vrste sadržaja koji će biti donesena unutar određenog . Ovdje prvo selectmoramo generirati h1element zaglavlja . Ako projicirani sadržaj nema h1element, neće ništa prikazati. Slično tome, drugi selecttraži a div. Ostatak sadržaja prikazuje se unutar zadnjeg sa br select.
Pozivanje komponente izgledat će ovako:
4. * ngTemplateOutlet
... Koriste se kao spremnik za predloške koji se mogu ponovno koristiti na više mjesta. O tome ćemo više pokriti u kasnijem odjeljku ovog članka.... Postoji još jedan slučaj upotrebe kada se koristi za dinamičko ubrizgavanje predloška u stranicu. O ovom ću slučaju govoriti u posljednjem odjeljku ovog članka.
Ovo je odjeljak u kojem ćemo razgovarati o prethodno spomenute dvije točke. *ngTemplateOutletkoristi se za dva scenarija - za umetanje zajedničkog predloška u različite odjeljke pogleda, bez obzira na petlje ili stanje, i za izradu visoko konfigurirane komponente.
Ponovna upotreba predloška:
Razmotrite prikaz u kojem morate umetnuti predložak na više mjesta. Na primjer, logotip tvrtke koji se postavlja unutar web mjesta. To možemo postići ako jednom napišemo predložak za logotip i ponovno ga upotrijebimo svugdje u prikazu.
Slijedi isječak koda:
Kao što vidite, samo smo jednom napisali predložak logotipa i koristili smo ga tri puta na istoj stranici s jednim retkom koda!
*ngTemplateOutlettakođer prihvaća objekt konteksta koji se može proslijediti za prilagodbu zajedničkog izlaza predloška. Za više informacija o kontekstnom objektu pogledajte službene dokumente.
Prilagodljive komponente:
Drugi slučaj upotrebe *ngTemplateOutletsu visoko prilagođene komponente. Razmotrimo naš prethodni primjer komponente s nekim izmjenama:
Iznad je modificirana verzija komponente koja prihvaća tri ulazne svojstva - headerTemplate, bodyTemplate, footerTemplate. Slijedi isječak za project-content.ts:
Ovdje pokušavamo postići da prikažemo zaglavlje, tijelo i podnožje kako su primljeni od nadređene komponente . Ako bilo koji od njih nije naveden, naša će komponenta na svom mjestu prikazati zadani predložak. Dakle, stvaranje visoko prilagođene komponente.
Da biste koristili našu nedavno izmijenjenu komponentu:
Ovako ćemo proslijediti reference predloška našoj komponenti. Ako bilo koji od njih nije prošao, tada će komponenta prikazati zadani predložak.
ng-content vs. * ngTemplateOutlet
Oboje nam pomažu u postizanju visoko prilagođenih komponenata, ali koje odabrati i kada?
Jasno se može vidjeti da *ngTemplateOutletnam daje još veću snagu prikazivanja zadanog predloška ako nije naveden.
To nije slučaj sa ng-content. Prikazuje sadržaj kakav jest. Sadržaj možete maksimalno podijeliti i prikazati na različitim mjestima vašeg pogleda uz pomoć selectatributa. Sadržaj ne možete uvjetno prikazati unutar ng-content. Morate prikazati sadržaj koji je primljen od roditelja bez ikakvog načina donošenja odluka na temelju sadržaja.
Međutim, odabir odabira između ove dvije opcije u potpunosti ovisi o vašem slučaju korištenja. Barem sada *ngTemplateOutletu svom arsenalu imamo novo oružje koje pruža dodatnu kontrolu nad sadržajem uz značajke ng-content!