Komponenttien välinen vuorovaikutus
Opetelkaa vanhempi- ja lapsikomponenttien välistä viestintää.
Komponenttien välinen vuorovaikutus on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/3. 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ä 3 oppituntia.
Komponenttien välinen vuorovaikutus
Tässä oppitunnissa opitte, miten komponentit viestivät keskenään Angularissa, erityisesti pää- ja alikomponenttien välillä.
Pää- ja alikomponenttien välinen vuorovaikutus
Komponenttien on usein jaettava tietoja. Pääkomponentit voivat välittää tietoja alikomponenteille input-ominaisuuksien avulla.
@Input()-dekoraattorin käyttäminen
Käyttäkää @Input()-dekoraattoria vastaanottaaksenne tietoja pääkomponentilta:
@Input() userData: string;Tietojen välittäminen alikomponentille
Välittäkää tiedot pääkomponentin mallipohjassa ominaisuuksien sidonnan avulla:
<app-child [userData]="parentData"></app-child>Viestintä alikomponentista pääkomponenttiin
Alikomponentit viestivät ylöspäin tapahtumien avulla käyttäen @Output()-dekoraattoria.
@Output()-dekoraattorin käyttäminen
Luokaa tapahtumalähetin tietojen lähettämiseksi alikomponentista pääkomponenttiin:
@Output() dataEvent = new EventEmitter<string>();Tapahtumien lähettäminen
Lähettäkää tapahtumia alikomponentista:
sendData() {
this.dataEvent.emit('Hello from Child');
}Tapahtumien kuunteleminen pääkomponentissa
Käsitelkää lähetetyt tapahtumat pääkomponentin mallipohjassa:
<app-child (dataEvent)="handleEvent($event)"></app-child>Yhteenveto
Ymmärrätte nyt, miten komponentit voivat olla vuorovaikutuksessa input- ja output-ominaisuuksien avulla Angularissa. Jatkakaa harjoittelua!
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 ”Komponenttien välinen vuorovaikutus” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Komponenttien välinen vuorovaikutus”. 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ä 3 oppituntia.
Mitä opin oppitunnilla ”Komponenttien välinen vuorovaikutus”?
Opetelkaa vanhempi- ja lapsikomponenttien välistä viestintää. 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/3.
Kuinka kauan ”Komponenttien välinen vuorovaikutus”-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
- Mukautetut direktiivit
- Komponenttien välinen vuorovaikutus
- Dynaamiset komponentit