Angular Academy · Oppitunti

Itsenäisten komponenttien luominen

Määritelkää komponentteja standalone-lipulla.

Oppitunti 2/413 vaihetta

Itsenäisten komponenttien luominen 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.

Itsenäisen komponentin luominen

Itsenäinen komponentti on yksinkertaisesti @Component-koristeella merkitty luokka, joka on määritetty itsenäiseksi. Angular v19:stä alkaen tämä on oletus, joten lippua ei usein tarvitse kirjoittaa lainkaan.

standalone-lippu

Aiemmin koristeeseen asetettiin standalone: true. Versiossa 19 ja sitä uudemmissa komponentit ovat oletusarvoisesti itsenäisiä, joten lippu on valinnainen.

import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  standalone: true, // optional in v19+
  template: '<h1>Welcome</h1>'
})
export class GreetingComponent {}

Valitsin

selector on mukautetun elementin tunniste, jolla komponentti sijoitetaan mallipohjaan, esimerkiksi app-greeting.

// usage in another template:
// <app-greeting></app-greeting>

Sisäinen mallipohja

Käyttäkää template-ominaisuutta sisäiseen HTML:ään. Se sopii erinomaisesti pienille komponenteille.

@Component({
  selector: 'app-badge',
  template: '<span class="badge">New</span>'
})
export class BadgeComponent {}

Ulkoinen mallipohja

Suurempia näkymiä varten osoittakaa templateUrl-ominaisuudella HTML-tiedostoon.

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html'
})
export class ProfileComponent {}

Tyylit

Lisätkää komponenttikohtaiset tyylit styles-ominaisuudella (sisäiset tyylit) tai styleUrl- ja styleUrls-ominaisuuksilla (ulkoiset tiedostot).

@Component({
  selector: 'app-card',
  template: '<div class="card"></div>',
  styles: ['.card { padding: 16px; }']
})
export class CardComponent {}

Komponenttiluokan logiikka

Luokan runko sisältää tilan ja toiminnan. Signaaleja käytettäessä ilmoittakaa reaktiivinen tila kenttinä.

import { Component, signal } from '@angular/core';

@Component({ selector: 'app-counter', template: '<p>{{ n() }}</p>' })
export class CounterComponent {
  n = signal(0);
}

Moduulia ei tarvita

Huomaatte, ettei mukana ole @NgModulea eikä declarations-taulukkoa. Komponentti on valmis tuotavaksi kaikkialle, missä sitä tarvitaan.

Tiedostojen nimeämiskäytäntö

Angularin käytännön mukaan tiedostot nimetään esimerkiksi greeting.component.ts, luokka GreetingComponent ja valitsin app-greeting.

Komponentin käyttäminen toisen komponentin sisällä

Voitte käyttää alikomponenttia tuomalla sen pääkomponentin imports-taulukkoon (käsitellään seuraavassa oppitunnissa) ja sijoittamalla sen valitsimen pääkomponentin mallipohjaan.

Luominen CLI:llä

Angular CLI luo itsenäisiä komponentteja oletusarvoisesti. Komento ng generate component greeting luo puolestanne itsenäisen GreetingComponent-komponentin pohjan.

Pikatarkistus: komponenttien luominen

Itsenäisten komponenttien oletuksista.

Vastaa interaktiivisessa oppitunnissa

Kertaus: itsenäisen komponentin luominen

Luotte itsenäisen komponentin @Component-koristeella ja voitte halutessanne asettaa standalone: true -määrityksen (oletus versiosta 19 alkaen). Määritätte valitsimen, template- tai templateUrl-ominaisuuden, valinnaiset tyylit ja luokan logiikan. NgModulea ei tarvita. Seuraavaksi tuotte riippuvuudet suoraan.

Aloita maksutta

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

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Itsenäisten komponenttien luominen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Itsenäisten komponenttien luominen”. 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 ”Itsenäisten komponenttien luominen”?

Määritelkää komponentteja standalone-lipulla. 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 ”Itsenäisten komponenttien luominen”-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

← Takaisin: Angular Academy