Angularissa komponentti on erityisohje, ja sen erityispiirre on, että sillä on oma mallipohja (html) ja tyyli (css). Siksi komponenttien käyttö voi tehdä koodistamme erittäin irrotetun, uudelleenkäytettävän ja helposti laajennettavan. Tavalliset komponentit määritellään seuraavasti:
demo.component.ts:
demo.component.html:
demo.component.scss:
Kun viitataan komponenttiin, komponentin jäsennelty sisältö renderöidään:
Oletetaan, että komponentin täytyy hyväksyä ulkoisesti projisoitu sisältö, mikä tarkoittaa, että komponentti esittää enemmän kuin vain sen, mitä se määrittelee. Tässä vaiheessa tämän artikkelin päähenkilö on kutsuttu mukaanng-sisältö。
Yksinkertainen projektio
Aloitetaan yksinkertaisimmasta: lisätään muokattu demo.component.html ja demo.component.scss demo.component.html:een seuraavasti:
demo.component.html:
demo.component.scss:
Vaikutuksen vuoksi astian taustaväri on tarkoituksella määritelty oranssiksi.
Tässä vaiheessa voimme lähettää sisältöä ulkopuolelta, kun viitataan komponenttiin, ja ulkoinen sisältö näkyy oranssilla alueella:
Kohdennettu projektio
Jos niitä on useita samaan aikaan, miten ulkoinen sisältö heijastetaan?
Katsotaanpa ensin esimerkkiä, erottamisen vuoksi lisäsin sinisen alueen, muokatun demo.component.html ja demo.component.scss:n seuraavasti:
demo.component.html:
demo.component.scss:
Komponentin viitteeksi:
Tässä vaiheessa näemme, että ulkoinen sisältö heijastuu siniseen alueeseen:
Tietenkin, jos laitat oranssin suuntanumeron sinisen suuntanumeron jälkeen, ulkoinen sisältö heijastuu oranssille alueelle:
Yllä olevasta esimerkistä näemme, että jos on myös yksinkertainen , ulkoinen sisältö projisoidaan komponenttipohjan viimeiseen osaan.
Joten kun tiedämme tämän ongelman, saatamme miettiä, voimmeko projisoida ulkoista sisältöä kohdennetulla tavalla? Vastaus on tietenkin kyllä.
Tämän ratkaisemiseksi kannattaa tukea yhtävalikoidaOminaisuuksia, joiden avulla voit projisoida tiettyä sisältöä tiettyyn paikkaan. Tämä ominaisuus tukee CSS-valitsijoita (tag-valitsija, luokka-valitsija, attribuuttivalitsija、... ) vastaamaan sitä, mitä haluat. Jos ng-contentille ei ole asetettu select-attribuuttia, se saa koko sisällön tai sisällön, joka ei vastaa mitään muuta ng-sisältöelementtiä.
Suoraan esimerkkiä tarkastellessa muokattu demo.component.html ja demo.component.scss ovat seuraavat:
demo.component.html:
demo.component.scss:
Kuten yllä olevasta koodista näet, sininen alue saa tagin otsikon osan, punainen alue saa osan divistä, jonka luokka on "demo2", vihreä alue saa osan divistä, jonka ominaisuusnimi on "demo3", ja oranssi alue saa loput ulkoisesta sisällöstä (aloitetaan, olen ulkoisen upotuksen sisältö, loppu).
Komponentin viitteeksi:
Tässä vaiheessa näemme ulkoisen sisällön projisoituvan määriteltyyn .
Laajenna tietoa
ngProjectAs
Nyt tiedämme, että ng-contentin select-ominaisuus mahdollistaa sen, että ulkoinen sisältö projisoidaan tiettyyn .
Sisällön oikeaan projisoimiseen select-attribuutin perusteella on olemassa rajoitus – olipa kyseessä tag-otsikko, div, jonka luokka on "demo2", tai div, jonka ominaisuusnimi on "demo3", nämä tunnisteet ovat kaikki komponenttitunnisteen suoria alisolmuja.
Mitä tapahtuisi, jos se ei olisi suora alasolmu? Muutetaan yksinkertaisesti koodia, joka viittaa demokomponenttikomponenttiin, laitetaan tagin otsikko diviin ja muokataan sitä seuraavasti:
Tässä vaiheessa näemme, että sisällön välilehtiotsikko ei enää projisoida siniseen alueeseen, vaan oranssiin alueeseen. Syynä on se, että <ng-content select="header"></ng-content> ei voi vastata aiempaa tagin otsikkoa, joten tämä osa sisällöstä heijastuu <ng-content></ng-content> oranssille alueelle.
Tämän ongelman ratkaisemiseksi meidän täytyy käyttää ngProjectAs-ominaisuutta, jota voidaan soveltaa mihin tahansa alkioon. Yksityiskohdat ovat seuraavat:
Asettamalla ngProjectAs-ominaisuuden div, jossa tunnisteotsikko sijaitsee, osoittaa select="header", ja osa tunnisteen otsikosta projisoidaan siniseen alueeseen:
<ng-content>Älä "luo" sisältöä
Tee koe
Kokeen tekemistä varten määrittele ensin demo-lapsikomponentti:
demo-komponenttikomponentti:
Sitten demo-komponentissa cast demo-child-komponentti:
Tässä vaiheessa konsolissa näemme, että demo-lapsikomponentin alustus on valmis! Nämä sanat. Mutta kun klikkaamme toimintojen vaihtamiseen tarkoitettua painiketta, demo-lapsikomponenttien alustus on valmis! Sitä ei enää paineta, mikä tarkoittaa, että demo-lapsikomponenttikomponenttimme instansoituu vain kerran – ei koskaan tuhota eikä luoda uudelleen.
Miksi näin tapahtuu?
Esiintymissyyt
<ng-content> Se ei "tuota" sisältöä, vaan vain projisoi olemassa olevaa sisältöä. Voit ajatella sitä vastaavana kuin node.appendChild(el) tai jQueryn $(node).append(el) metodi: näillä metodeilla solmua ei kloonata, vaan se siirretään vain uuteen sijaintiinsa. Siksi projisoidun sisällön elinkaari on sidottu siihen, missä se on ilmoitettu, ei näytetä paikallaan.
Tämä selittää myös edellisen kysymyksen periaatteesta:Jos niitä on useita samaan aikaan, miten ulkoinen sisältö heijastetaan?
Tätä käyttäytymistä tehdään kahdesta syystä: johdonmukaisuudesta ja suorituskyvystä. Mitä "haluttu johdonmukaisuus" tarkoittaa, tarkoittaa sitä, että kehittäjänä voit arvata sovelluksesi käyttäytymisen sen koodin perusteella. Oletetaan, että kirjoitin seuraavan koodin:
Ilmeisesti demo-lapsi-komponentti toteutetaan kerran, mutta nyt, jos käytämme kolmannen osapuolen kirjaston komponenttia:
Jos kolmannen osapuolen kirjasto hallitsee demo-lapsikomponenttikomponentin elinkaarta, minulla ei ole keinoa tietää, kuinka monta kertaa se on toteutettu. Ainoa tapa tehdä tämä on tarkastella kolmannen osapuolen kirjastojen koodia ymmärtääkseen niiden sisäistä prosessointilogiikkaa. Komponentin elinkaaren sitominen sovelluskomponentteihin kääreiden sijaan tarkoittaa, että kehittäjät voivat hallita, että laskureita käynnistetään vain kerran, ilman että he tietävät kolmannen osapuolen kirjastojen sisäistä koodia.
Suorituskyvyn syyton tärkeämpää. Koska ng-sisältö on vain liikkuva elementti, se voidaan tehdä käännösaikana, ei ajonaikaisesti, mikä vähentää merkittävästi varsinaisen sovelluksen työkuormaa.
Kiertotie
Jotta komponentti voisi ohjata projisoitujen alikomponenttien instanssia, voimme tehdä tämän kahdella tavalla: käyttämällä <ng-template> elementtejä ja ngTemplateOutleteja sisällön ympärillä tai käyttämällä rakennedirektiivejä, joissa on "*"-syntaksi. Yksinkertaisuuden vuoksi käytämme esimerkkissä <ng-template> syntaksia .
demo-komponenttikomponentti:
Sitten sisällytämme demo-child-komponentin ng-malliin:
Tässä vaiheessa, kun painamme vaihtopainiketta, konsoli tulostuudemo-lapsikomponentin alustus valmis!Nämä sanat.
|
Julkaistu 12.6.2019 10.14.39
|
|
|
|
Julkaistu 14.6.2019 14.14.35