Az Angularban egy komponens különleges direktív, és különlegessége, hogy saját sablonja (html) és stílusa (css) van. Ezért a komponensek használata nagyon leválaszthatóvá, újrahasználhatóvá és könnyen bővíthetővé teheti a kódunkat. A szokásos komponensek a következőképpen definiálódnak:
demo.component.ts:
demo.component.html:
demo.component.scss:
Amikor hivatkozunk a komponensre, a komponens elemzött tartalma a következőképpen jelenik meg:
Tegyük fel, hogy szükség van arra, hogy a komponensnek elfogadja a külső kivetített tartalmat, ami azt jelenti, hogy a komponens többet mutat be, mint amit pontosan meghatároz. Ekkor a cikk főszereplőjét is meghívjákng-tartalom。
Egyszerű vetítés
Kezdjük a legegyszerűbbről: adjuk hozzá a módosított demo.component.html és a demo.component.scss demo.component.html-hez a következőket:
demo.component.html:
demo.component.scss:
A hatás kedvéért a tartály háttérszínét szándékosan narancssárga színűnek határozzuk.
Ekkor kívülről is megjeleníthetjük a tartalmat, amikor a komponensre hivatkozunk, és a külső tartalom a narancssárga területen jelenik meg:
Célzott vetítés
Ha egyszerre több van is, hogyan vetítik ki a külső tartalmat?
Nézzünk meg először egy példát, a megkülönböztetés kedvéért hozzáadtam egy kék területet, a módosított demo.component.html-t és a demo.component.scss-t a következőként:
demo.component.html:
demo.component.scss:
Az alkatrész hivatkozására:
Ekkor látjuk, hogy a külső tartalom a kék területre vetül:
Természetesen, ha a narancssárga körzetszámot a kék körzetszám után írod, akkor a külső tartalom a narancssárga területre vetíthető:
A fenti példából láthatjuk, hogy ha van egy egyszerű , akkor a külső tartalom a komponens sablon utolsó részében fog kivetíteni.
Tehát ha tudjuk ezt a problémát, elgondolkodhatunk, vajon célzott módon tudunk-e külső tartalmat vetíteni? A válasz nyilvánvalóan igen.
Ehhez segíts egyetkiválasztOlyan attribútumok, amelyek lehetővé teszik, hogy egy adott helyen konkrét tartalmat vetíts. Ez a tulajdonság támogatja a CSS választókat (tag selector, class selector, attribute selector、... ) ahhoz, hogy megfeleljen annak, amit szeretnél. Ha ng-tartalomon nincs kiválasztási attribútum, akkor megkapja a teljes tartalmat, vagy azt a tartalmat, amely nem egyezik meg más ng-tartalom elemekkel.
Közvetlenül a példát nézve a módosított demo.component.html és a demo.component.scss a következők:
demo.component.html:
demo.component.scss:
Ahogy a fenti kódból is láthatod, a kék terület megkapja a címke fejlécének egy részét, a piros terület a div "demo2" osztályú részét, a zöld terület a div "demo3" nevű részét, a narancssárga terület pedig a külső tartalom többi részét (start, én vagyok a külső beágyazás, vég).
Az alkatrész hivatkozására:
Ezen a ponton a külső tartalmat a megadott .
Tudás bővítése
ngProjectAs
Most már tudjuk, hogy az ng-content select tulajdonsága lehetővé teszi, hogy megadjuk, hogy külső tartalom vetíthető egy adott .
A select attribútum alapján történő tartalom helyes vetítéséhez van egy korlát – legyen szó címkéfejlécről, egy "demo2" osztályú divről vagy egy "demo3" tulajdonságnevű divről, ezek a címkék mind a komponens címke közvetlen alcsomópontjai.
Mi történne, ha nem lenne közvetlen alcsomópont? Egyszerűen módosítsuk a demo-komponens komponensre hivatkozó kódot, tegyük a címke fejlécét egy div-be, és módosítsuk a következőként:
Ekkor látjuk, hogy a tartalom fülfejlécje már nem a kék területre vetül, hanem a narancssárga területre. Ennek oka, hogy a <ng-content select="header"></ng-content> nem egyezik az előző címke fejlécével, így ez a tartalom része a <ng-content></ng-content> narancssárga területre vetül.
Ennek a problémának a megoldásához a ngProjectAs tulajdonságot kell használnunk, amely bármely elemre alkalmazható. A részletek a következők:
Az ngProjectAs tulajdonság beállításával a címke fejlécének helye a select="header" jelzésére mutat, és a címke fejlécének egy része a kék területre vetül:
<ng-content>Ne "generálj" tartalmat
Végezz kísérletet
Kísérlethez először definiáljunk egy demo-gyermek-komponens komponenst:
Demo-komponens komponens a következőkhöz:
Ezután demo-komponens vetés demo-gyerek-komponens keretében:
Ekkor a konzolon látjuk, hogy a demo-gyerekkomponens inicializálás befejeződött! Ezek a szavak. De amikor rákattintunk a művelet váltásához, a demo-gyermek-komponens inicializálás befejeződött! Már nem nyomtatják, ami azt jelenti, hogy a demo-gyerek-komponens komponensünk csak egyszer jelenik meg – soha nem semmisítik meg és hozzák újra.
Miért történik ez?
Előfordulási okok
<ng-content> Nem "generál" tartalmat, csak a meglévő tartalmat vetíti. Gondolhatod úgy, hogy ekvivalens a node.appendChild(el) vagy a jQuery $(node).append(el) módszerével: ezekkel a metódusokkal a csomópontot nem klónozzák, egyszerűen áthelyezik az új helyére. Ezért a kivetített tartalom életciklusa a kijelentéshez kötött, nem pedig helyben jeleníti meg.
Ez magyarázza az előző kérdést is az elvből:Ha egyszerre több van is, hogyan vetítik ki a külső tartalmat?
Ez a viselkedés két okból történik: következetesség és teljesítmény. A "kívánt konzisztencia" azt jelenti, hogy fejlesztőként meg tudod tippelni az alkalmazásod viselkedését a kódja alapján. Tegyük fel, hogy a következő kódot írtam:
Nyilvánvalóan a demo-child-component komponens egyszer megvalósítható, de most, ha egy harmadik féltől származó könyvtárból származó komponenst használunk:
Ha egy harmadik féltől származó könyvtár irányítja egy demo-gyermek-komponens komponens életciklusát, akkor nem tudhatom, hányszor indították már meg. Ennek egyetlen módja, ha megnézzük a harmadik féltől származó könyvtárak kódját, hogy megértsük a belső feldolgozási logikát. Az, hogy egy komponens életciklusát az alkalmazáskomponensekhez kötjük a wrapperek helyett, az, hogy a fejlesztők szabályozhatják, hogy a számlálókat csak egyszer idézik meg, anélkül, hogy ismernék a harmadik féltől származó könyvtárak belső kódját.
A teljesítmény okaifontosabb. Mivel az ng-tartalom csak mozgó elem, fordítás közben is megvalósítható, nem futásidőben, ami jelentősen csökkenti az alkalmazás tényleges terhelését.
Megoldás
Ahhoz, hogy a komponens irányítsa a vetített alkomponensek megfogalmazását, ezt kétféleképpen tehetjük meg: <ng-template> elemeket és ngTemplateOutlet-eket használva a tartalomunk körül, vagy strukturális direktívákat "*" szintaxissal. Az egyszerűség érdekében a példában a szintaxist <ng-template> használjuk .
Demo-komponens komponens a következőkhöz:
Ezután beépítjük a demo-child-komponens az ng-sablonba:
Ekkor, amikor megnyomjuk a váltás gombot, a konzol kinyomtatjaDemo-gyermek-komponens inicializálás befejeződött!Ezek a szavak.
|
Közzétéve 2019. 06. 12. 10:14:39
|
|
|
|
Közzétéve 2019. 06. 14. 14:14:35