Angular Academy · Oppitunti

ngOnInit ja alustus

Suorittakaa alustukseen liittyvä logiikka komponentin käynnistyessä.

Oppitunti 1/413 vaihetta

ngOnInit ja alustus on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/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.

Mitä elinkaarikoukut ovat?

Angular-komponenteilla on kehyksen hallinnoima elinkaari: luonti, muutoksentunnistus, renderöinti ja tuhoaminen. Elinkaarikoukuilla voit suorittaa koodia tietyissä vaiheissa.

OnInitin esittely

OnInit-koukku suoritetaan kerran sen jälkeen, kun Angular on asettanut komponentin syötteet ja renderöinyt alkuperäisen näkymän. Se on tavallinen paikka alustamislogiikalle.

OnInitin toteuttaminen

Toteuta OnInit-rajapinta ja lisää ngOnInit-metodi. Angular kutsuu sitä automaattisesti.

import { Component, OnInit } from "@angular/core";

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnInit {
  ngOnInit(): void {
    console.log("Component initialized");
  }
}

Constructor ja ngOnInit

Constructor suoritetaan ensin, ennen syötteiden asettamista, ja siinä pitäisi tehdä vain kevyt riippuvuuksien injektointi. Käytä ngOnInit-metodia varsinaiseen alustukseen, kun syötteet ovat käytettävissä.

constructor(private http: HttpClient) {
  // inputs NOT ready yet
}

ngOnInit() {
  // inputs ARE ready here
}

Syötteet ovat valmiina ngOnInitissä

Kun ngOnInit suoritetaan, kaikilla @Input-ominaisuuksilla on vanhemmasta komponentista sidotut alkuarvonsa.

@Input() userId!: string;

ngOnInit() {
  console.log(this.userId); // available
}

Datan hakeminen ngOnInitissä

Yleinen toimintamalli on ladata data palvelusta ngOnInit-metodissa, koska silloin käytettävissä ovat syötteet ja riippuvuudet.

ngOnInit() {
  this.userService.getUser(this.userId)
    .subscribe(u => this.user = u);
}

ngOnInit suoritetaan kerran

Toisin kuin muutoksentunnistuskoukut, ngOnInit suoritetaan komponentin elinkaaren aikana täsmälleen kerran, heti ensimmäisen ngOnChanges-kutsun jälkeen.

Järjestys suhteessa ngOnChangesiin

Jos komponentilla on syötteitä, ngOnChanges suoritetaan ensin alkuarvoilla ja sen jälkeen ngOnInit. Ilman syötteitäkin ngOnInit suoritetaan.

// sequence with inputs:
// 1. constructor
// 2. ngOnChanges (first)
// 3. ngOnInit

Lomakkeiden alustaminen

Reaktiivisten lomakkeiden rakentaminen on tyypillinen ngOnInit-tehtävä, koska lomakkeen alustamiseen voidaan tarvita injektoituja palveluita.

form!: FormGroup;

ngOnInit() {
  this.form = this.fb.group({
    name: [""],
    email: [""]
  });
}

Pidä constructor kevyenä

Vältä raskaita toimintoja constructorissa. Se suoritetaan ennen kuin Angular yhdistää syötteet, ja sen sivuvaikutukset tekevät komponenteista vaikeammin testattavia ja ennakoitavia.

Asynkroninen alustaminen

Voit kutsua asynkronista logiikkaa ngOnInit-metodista, mutta metodi itse palauttaa void-arvon; tilaa tai käytä asynkronisia toimintamalleja sen sisällä.

ngOnInit() {
  this.loadAsync();
}

private async loadAsync() {
  this.data = await firstValueFrom(this.api.get());
}

Pikatarkistus

Testaa, miten hyvin ymmärrät OnInitin.

Vastaa interaktiivisessa oppitunnissa

Kertaus

OnInit-koukku ja ngOnInit suoritetaan kerran syötteiden sitomisen jälkeen, ja ne sopivat ihanteellisesti datan hakemiseen ja lomakkeen alustamiseen. Pidä constructor kevyenä ja varaa alustaminen ngOnInit-metodille.

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 ”ngOnInit ja alustus” ilmainen?

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

Suorittakaa alustukseen liittyvä logiikka komponentin käynnistyessä. 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 1/4.

Kuinka kauan ”ngOnInit ja alustus”-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