"Angular" komponentas yra speciali direktyva, o jo ypatinga savybė yra ta, kad jis turi savo šabloną (html) ir stilių (css). Todėl naudojant komponentus mūsų kodas gali būti labai atsietas, pakartotinai naudojamas ir lengvai išplečiamas. Įprastos sudedamosios dalys apibrėžiamos taip:
demo.component.ts:
demo.component.html:
demo.component.scss:
Kai nurodome komponentą, pateikiamas išanalizuotas komponento turinys:
Tarkime, kad komponentas turi priimti išoriškai projektuojamą turinį, o tai reiškia, kad komponentas galiausiai pateikia daugiau nei tik tai, ką apibrėžia. Šiuo metu kviečiamas šio straipsnio veikėjasng kiekis。
Paprasta projekcija
Pradėkime nuo paprasčiausio, pridėkite modifikuotą demo.component.html ir demo.component.scss prie demo.component.html taip:
demo.component.html:
demo.component.scss:
Efekto sumetimais talpyklos fono spalva sąmoningai apibrėžiama kaip oranžinė.
Šiuo metu galime perduoti turinį iš išorės, nurodydami komponentą, o išorinis turinys bus rodomas oranžinėje srityje:
Tikslinė projekcija
Jei vienu metu yra keli, kaip bus projektuojamas išorinis turinys?
Pirmiausia pažvelkime į pavyzdį, skirtumo dėlei pridėjau mėlyną sritį, modifikuotą demo.component.html ir demo.component.scss taip:
demo.component.html:
demo.component.scss:
Norėdami nurodyti komponentą:
Šiuo metu pamatysime, kad išorinis turinys projektuojamas į mėlyną sritį:
Žinoma, jei po mėlyno srities kodo įdėsite oranžinį srities kodą, išorinis turinys bus projektuojamas į oranžinę sritį:
Taigi iš aukščiau pateikto pavyzdžio matome, kad jei taip pat yra paprastas , tada išorinis turinys bus projektuojamas paskutiniame komponento šablone.
Taigi, žinodami šią problemą, galime susimąstyti, ar galime tikslingai projektuoti išorinį turinį? Atsakymas yra akivaizdžiai taip.
Norėdami išspręsti šią problemą, palaikykite vienąžymėtiAtributai, leidžiantys projektuoti konkretų turinį konkrečioje vietoje. Ši ypatybė palaiko CSS parinkiklius (žymų parinkiklį, klasės parinkiklį, atributų parinkiklį、... ), kad atitiktų tai, ko norite. Jei ng-content nenustatytas joks pasirinkimo atributas, jis gaus visą turinį arba turinį, kuris neatitinka jokio kito ng-content elemento.
Žvelgiant tiesiai į pavyzdį, modifikuoti demo.component.html ir demo.component.scss yra tokie:
demo.component.html:
demo.component.scss:
Kaip matote iš aukščiau pateikto kodo, mėlyna sritis gaus dalį žymos antraštės, raudona sritis gaus div dalį su klase "demo2", žalia sritis gaus div dalį su nuosavybės pavadinimu "demo3", o oranžinė sritis gaus likusį išorinį turinį (pradžia, aš esu išorinio įterpimo turinys, pabaiga).
Norėdami nurodyti komponentą:
Šiuo metu pamatysime išorinį turinį, projektuojamą į nurodytą .
Išplėskite žinias
ngProjectAs
Dabar žinome, kad ng-content pasirinkimo savybė leidžia nurodyti, kad išorinis turinys projektuojamas į tam tikrą .
Norint teisingai projektuoti turinį pagal pasirinktą atributą, yra apribojimas - nesvarbu, ar tai žymos antraštė, div su klase "demo2", ar div su ypatybės pavadinimu "demo3", visos šios žymos yra tiesioginiai komponento žymos pomazgiai.
Kas nutiktų, jei ne tiesioginis pomazgis? Tiesiog pakeiskime kodą, nurodantį demonstracinį komponentą, įdėkite žymos antraštę į div ir modifikuokime ją taip:
Šiuo metu matome, kad skirtuko antraštės turinio dalis projektuojama nebe į mėlyną, o į oranžinę sritį. Priežastis ta, kad <ng-content select="header"></ng-content> negali atitikti ankstesnės žymos antraštės, todėl ši turinio dalis projektuojama į oranžinę <ng-content></ng-content> sritį.
Norėdami išspręsti šią problemą, turime naudoti ypatybę ngProjectAs, kurią galima pritaikyti bet kuriam elementui. Išsami informacija yra tokia:
Nustačius ypatybę ngProjectAs, div, kuriame yra žymos antraštė, nurodo select="header", o žymos antraštės dalis projektuojama į mėlyną sritį:
<ng-content>"Negeneruoti" turinio
Atlikite eksperimentą
Norėdami atlikti eksperimentą, pirmiausia apibrėžkite demonstracinio antrinio komponento komponentą:
demonstracinio komponento komponentas:
Tada demonstracinio komponento perdavimo demo-child-component:
Šiuo metu konsolėje matome, kad demonstracinio vaiko komponento inicijavimas baigtas! Šie žodžiai. Bet kai spustelėjame mygtuką, kad perjungtume operacijas, demonstracinio vaiko komponento inicijavimas baigtas! Jis nebespausdinamas, o tai reiškia, kad mūsų demonstracinis vaiko komponentas yra sukurtas tik vieną kartą - niekada nesunaikinamas ir atkuriamas.
Kodėl tai vyksta?
Atsiradimo priežastys
<ng-content> Jis "negamina" turinio, jis tik projektuoja esamą turinį. Galite galvoti apie tai kaip lygiavertį node.appendChild(el) arba $(node).append(el) metodą jQuery: naudojant šiuos metodus, mazgas nėra klonuojamas, jis tiesiog perkeliamas į naują vietą. Todėl projektuojamo turinio gyvavimo ciklas bus susietas su vieta, kur jis deklaruojamas, o ne rodomas vietoje.
Tai taip pat paaiškina ankstesnį klausimą iš principo:Jei vienu metu yra keli, kaip bus projektuojamas išorinis turinys?
Toks elgesys atliekamas dėl dviejų priežasčių: nuoseklumo ir našumo. Ką reiškia "norimas nuoseklumas", kaip kūrėjas galite atspėti savo programos elgesį pagal jos kodą. Tarkime, aš parašiau šį kodą:
Akivaizdu, kad demonstracinis vaiko komponentas bus sukurtas vieną kartą, bet dabar, jei naudosime komponentą iš trečiosios šalies bibliotekos:
Jei trečiosios šalies biblioteka kontroliuoja demonstracinio vaiko komponento gyvavimo ciklą, aš neturėsiu būdo žinoti, kiek kartų jis buvo sukurtas. Vienintelis būdas tai padaryti yra pažvelgti į trečiųjų šalių bibliotekų kodą, kad suprastumėte jų vidinę apdorojimo logiką. Komponento gyvavimo ciklo susiejimas su mūsų programos komponentais, o ne įvyniojimais, yra tas, kad kūrėjai gali kontroliuoti, kad skaitikliai būtų sukurti tik vieną kartą, nežinodami trečiųjų šalių bibliotekų vidinio kodo.
Veiklos priežastysyra svarbesnis. Kadangi ng turinys yra tik judantis elementas, tai galima padaryti kompiliavimo metu, o ne vykdymo metu, o tai labai sumažina faktinės programos darbo krūvį.
Sprendimo būdas
Kad komponentas galėtų valdyti projektuojamų subkomponentų egzempliorių, tai galime padaryti dviem būdais: naudodami <ng-template> elementus ir ngTemplateOutlets aplink savo turinį arba naudodami struktūros direktyvas su "*" sintaksė. Paprastumo dėlei pavyzdyje naudosime sintaksę <ng-template> .
demonstracinio komponento komponentas:
Tada įtraukiame demo-child-component į ng-template:
Šiuo metu, kai spustelėsime mygtuką, kad perjungtume, konsolė atsispausdinsDemonstracinio antrinio komponento inicijavimas baigtas!Šie žodžiai.
|
Paskelbta 2019-06-12 10:14:39
|
|
|
|
Paskelbta 2019-06-14 14:14:35