Input- ja output-arvojen tarjoaminen
Tuokaa host-direktiivien input- ja output-arvot saataville
Input- ja output-arvojen tarjoaminen on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.
Koostettujen rajapintojen julkaiseminen
Kun koostet direktiivin hostDirectives-ominaisuuden avulla, sen inputit ja outputit ovat oletusarvoisesti piilossa. Koostamisen API:n avulla voit julkaista valitut inputit ja outputit isännän julkisessa rajapinnassa.
Oliomuoto
Pelkkien luokkien luettelemisen sijaan käytä oliota, jossa on directive-, inputs- ja outputs-taulukot.
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText'],
outputs: ['tooltipShown']
}]Syötteen tuominen näkyviin
Syötteen nimen lisääminen kohtaan inputs tekee siitä sidottavan isäntäelementissä kuluttajien toimesta.
<app-button tooltipText="Save changes"></app-button>Tulosteen tuominen näkyviin
Tulosteen lisääminen saa isännän välittämään kyseisen direktiivin tapahtumat uudelleen.
<app-button (tooltipShown)="onShown()"></app-button>Nimeäminen näkyviin tuotaessa
Muotoa publicName: internalName käyttämällä voit nimetä syötteen tai tulosteen uudelleen, kun tuot sen näkyviin.
inputs: ['tooltipText: hint']
// consumers bind [hint]="..."Tulosteiden nimeäminen uudelleen
Tulosteet nimetään uudelleen samalla tavalla.
outputs: ['tooltipShown: shown']
// template: (shown)="..."Miksi piilottaa oletusarvoisesti?
Koostettujen syötteiden ja tulosteiden piilottaminen pitää isännän ohjelmointirajapinnan tarkoituksenmukaisena. Tuotte näkyviin vain kuluttajien tarvitsemat asiat, jolloin direktiivin sisäiset yksityiskohdat eivät vuoda ulospäin.
Yhdistäminen omiin syötteisiin
Isännällä voi olla omia syötteitä näkyviin tuotujen syötteiden rinnalla; Angular yhdistää ne yhdeksi elementin julkiseksi ohjelmointirajapinnaksi.
@Component({
selector: 'app-button',
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText']
}]
})
export class ButtonComponent {
label = input('');
}Nimien yhteentörmäykset
Jos näkyviin tuodun syötteen nimi on sama kuin isännän oman syötteen nimi, uudelleennimeäminen poistaa ristiriidan ja selkeyttää tarkoitusta.
Kaksisuuntaiset sidonnat
Jotta kaksisuuntaista sidontaa voidaan tukea koostamisen kautta, tuo näkyviin sekä syöte että sitä vastaava Change-tuloste käyttäen yhdenmukaisia nimiä.
Hyvä käytäntö
Tuokaa näkyviin vain kuluttajien tarvitsemat, selkeästi nimetyt osat. Nimetkää sisäiset nimet uudelleen komponenttinne sanaston mukaisiksi, älkää taustalla olevan direktiivin nimien mukaisiksi.
Pikatesti
Testaa ymmärryksesi syötteiden ja tulosteiden näkyviin tuomisesta.
Kertaus
Opit, että hostDirectives-kohteen objektimuoto tuo valitut inputs- ja outputs-määritykset isännän ohjelmointirajapintaan. Niiden nimet voidaan halutessa muuttaa muodolla publicName: internalName, jolloin julkinen rajapinta säilyy tarkoituksenmukaisena.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 38
- Oppitunnit
- 144
Usein kysytyt kysymykset
Onko oppitunti ”Input- ja output-arvojen tarjoaminen” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Input- ja output-arvojen tarjoaminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Input- ja output-arvojen tarjoaminen”?
Tuokaa host-direktiivien input- ja output-arvot saataville Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Input- ja output-arvojen tarjoaminen”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?
Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- hostDirectives-ominaisuus
- Input- ja output-arvojen tarjoaminen
- Uudelleenkäytettävien toimintojen rakentaminen
- Kompositio vai perintä