V Angulare je komponent špeciálnou direktívou a jej špeciálnou vlastnosťou je, že má vlastnú šablónu (html) a štýl (css). Preto použitie komponentov môže urobiť náš kód vysoko oddeleným, znovupoužiteľným a ľahko rozšíriteľným. Bežné zložky sú definované nasledovne:
demo.component.ts:
demo.component.html:
demo.component.scss:
Keď odkazujeme na komponent, vykreslí sa spracovaný obsah komponentu:
Predpokladajme, že komponent musí prijímať externe premietaný obsah, čo znamená, že komponent nakoniec prezentuje viac než len to, čo definuje. V tomto čase je pozvaný hlavný hrdina tohto článkung-obsah。
Jednoduchá projekcia
Začnime s najjednoduchším, pridajte modifikovaný demo.component.html a demo.component.scss do demo.component.html, nasledovne:
demo.component.html:
demo.component.scss:
Pre efekt je farba pozadia kontajnera zámerne definovaná ako oranžová.
V tomto bode môžeme pri odkazovaní na komponent vysielať obsah zvonku a externý obsah sa zobrazí v oranžovej oblasti:
Cielená projekcia
Ak je ich viacero naraz, ako bude externý obsah premietaný?
Pozrime sa najprv na príklad, pre rozlíšenie som pridal modrú oblasť, upravený demo.component.html a demo.component.scss nasledovne:
demo.component.html:
demo.component.scss:
Pre referenciu komponentu:
V tomto bode uvidíme, že externý obsah je premietaný do modrej oblasti:
Samozrejme, ak umiestnite oranžové smerové číslo za modré, externý obsah sa premietne do oranžovej oblasti:
Z vyššie uvedeného príkladu vidíme, že ak existuje aj jednoduché , potom sa externý obsah premietne do poslednej šablóny komponentu.
Takže keď poznáme tento problém, môžeme sa pýtať, či dokážeme externý obsah premietať cielene? Odpoveď je samozrejme áno.
Aby ste sa s tým vyrovnali, podporte jednéhovybraťAtribúty, ktoré vám umožňujú premietať konkrétny obsah na konkrétne miesto. Táto vlastnosť podporuje CSS selektory (výber značiek, výber triedy, výber atribútov、... ) aby zodpovedal tomu, čo chceš. Ak na ng-obsah nie je nastavený žiadny výberový atribút, dostane celý obsah alebo obsah, ktorý nezodpovedá žiadnemu inému ng-obsahovému prvku.
Ak sa pozrieme priamo na príklad, upravené demo.component.html a demo.component.scss sú nasledovné:
demo.component.html:
demo.component.scss:
Ako vidíte z vyššie uvedeného kódu, modrá oblasť dostane časť hlavičky tagu, červená oblasť časť divu s triedou "demo2", zelená oblasť časť divu s názvom vlastnosti "demo3" a oranžová oblasť dostane zvyšok externého obsahu (začiatok, som obsah externého vloženia, koniec).
Pre referenciu komponentu:
V tomto bode uvidíme externý obsah premietaný do špecifikovanej .
Rozširujte vedomosti
ngProjectAs
Teraz vieme, že vlastnosť select ng-content umožňuje špecifikovať, že externý obsah je premietaný do daného .
Na správne premietanie obsahu na základe atribútu select existuje obmedzenie – či už ide o hlavičku tagu, div s triedou "demo2" alebo div s názvom vlastnosti "demo3", tieto tagy sú všetky priamymi poduzlomi komponentného tagu.
Čo by sa stalo, keby to nebol priamy subuzol? Jednoducho upravme kód, ktorý odkazuje na demo-komponent, vložme hlavičku tagu do divu a upravme ju nasledovne:
V tomto bode vidíme, že časť obsahu s hlavičkou záložky už nie je premietaná do modrej oblasti, ale do oranžovej oblasti. Dôvodom je, že <ng-content select="header"></ng-content> nemôže zodpovedať predchádzajúcej hlavičke tagu, takže táto časť obsahu sa premieta do oranžovej <ng-content></ng-content> oblasti.
Na vyriešenie tohto problému musíme použiť vlastnosť ngProjectAs, ktorú možno aplikovať na akýkoľvek prvok. Podrobnosti sú nasledovné:
Nastavením vlastnosti ngProjectAs div, kde sa nachádza hlavička tagu, smeruje na select="header" a časť hlavičky tagu sa premietne do modrej oblasti:
<ng-content>Nevytvárajte "generujúci" obsah
Urob experiment
Na vykonanie experimentu najprv definujte komponent demo-potomka:
Demo-komponent pre:
Potom v demo-komponente obsadenie-demo-dieťa-komponenta:
V tomto bode v konzole vidíme, že inicializácia demo-child-komponentu je dokončená! Tieto slová. Ale keď klikneme na tlačidlo na prepnutie operácií, inicializácia demo-potomka komponentu je dokončená! Už sa netlačí, čo znamená, že naša demo-child komponenta sa inštancionuje len raz – nikdy nie je zničená a znovu vytvorená.
Prečo sa to deje?
Príčiny výskytu
<ng-content> Neprodukuje obsah, len premieta existujúci obsah. Môžete si to predstaviť ako ekvivalent metódy node.appendChild(el) alebo $(node).append(el) v jQuery: pri týchto metódach sa uzol neklonuje, jednoducho sa presunie na nové miesto. Preto bude životný cyklus premietnutého obsahu viazaný na miesto, kde je deklarovaný, nie zobrazený priamo na mieste.
To tiež vysvetľuje predchádzajúcu otázku z princípu:Ak je ich viacero naraz, ako bude externý obsah premietaný?
Toto správanie sa deje z dvoch dôvodov: konzistentnosť a výkon. Čo znamená "požadovaná konzistencia", že ako vývojár môžete odhadnúť správanie svojej aplikácie na základe jej kódu. Povedzme, že som napísal nasledujúci kód:
Samozrejme, demo-child-komponent bude inštancovaný raz, ale teraz, ak použijeme komponent z knižnice tretej strany:
Ak má knižnica tretej strany kontrolu nad životným cyklom demo-child komponentu, nebudem mať spôsob, ako zistiť, koľkokrát bola inštancovaná. Jediný spôsob, ako to dosiahnuť, je pozrieť sa do kódu knižníc tretích strán, aby ste pochopili ich vnútornú logiku spracovania. Význam viazania životného cyklu komponentu na naše aplikačné komponenty namiesto obalov je, že vývojári môžu ovládať, že čítače sa inštancionujú len raz, bez znalosti interného kódu knižníc tretích strán.
Dôvody výkonuje dôležitejšie. Keďže ng-content je len pohyblivý prvok, môže sa vykonávať počas kompilácie, nie za behu, čo výrazne znižuje záťaž samotnej aplikácie.
Obchádzka
Aby komponent riadil inštanciáciu projektovaných podkomponentov, môžeme to urobiť dvoma spôsobmi: použitím <ng-template> prvkov a ngTemplateOutlets okolo nášho obsahu, alebo použitím štruktúrnych direktív so syntaxou "*". Pre jednoduchosť použijeme syntax v príklade <ng-template> .
Demo-komponent pre:
Potom zahrnieme demo-child-komponent do ng-template:
V tomto bode, keď klikneme na tlačidlo na zmenu, konzola vytlačíInicializácia demo-child komponentu dokončená!Tieto slová.
|
Zverejnené 12. 6. 2019 10:14:39
|
|
|
|
Zverejnené 14. 6. 2019 14:14:35