Angular Academy · Oppitunti

inject-funktio

Ratkaiskaa riippuvuuksia inject-funktion avulla.

Oppitunti 2/413 vaihetta

inject-funktio 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.

inject-funktio

inject()-funktio noutaa riippuvuuden injektorista. Se on nykyaikainen vaihtoehto riippuvuuksien injektoimiselle konstruktoriparametreina.

Peruskäyttö

Kutsukaa inject-funktiota haluamallanne luokalla ja sijoittakaa palautettu arvo kenttään.

import { Component, inject } from '@angular/core';
import { DataService } from './data.service';

@Component({ selector: 'app-x', template: '' })
export class XComponent {
  private data = inject(DataService);
}

Vertailu konstruktorin kautta injektoimiseen

Vanhemmassa tyylissä riippuvuudet ilmoitetaan konstruktorin parametreina. inject() tekee saman työn kentän alustajana, mikä on usein selkeämpää.

// old style:
// constructor(private data: DataService) {}

Missä inject-funktiota voi kutsua

inject()-funktion on suorituttava injektiokontekstissa: komponentin, direktiivin tai palvelun luonnin aikana tai kenttien alustajissa ja palveluntarjoajien factory-funktioissa.

Injektoiminen palvelussa

Käyttäkää inject-funktiota myös palveluissa, esimerkiksi HttpClient-palvelun hakemiseen.

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class Api {
  private http = inject(HttpClient);
}

Vähemmän toistuvaa koodia

inject-funktiolla vältätte pitkät konstruktorin allekirjoitukset. Jokainen riippuvuus on yksinkertainen kenttämäärittely, jota on helppo lukea ja jonka järjestystä on helppo muuttaa.

Injektoitujen palveluiden käyttäminen

Kun palvelu on injektoitu, kutsukaa sitä kuten mitä tahansa objektia.

export class XComponent {
  private store = inject(CounterStore);
  add() { this.store.increment(); }
}

inject-funktio funktionaalisissa vartijoissa

Funktionaaliset reittivartijat ja resolverit suoritetaan injektiokontekstissa, joten voitte kutsua niissä inject-funktiota palveluiden käyttämiseen.

// export const authGuard = () => {
//   const auth = inject(AuthService);
//   return auth.isLoggedIn();
// };

Valinnaiset riippuvuudet

inject hyväksyy asetuksia, joiden avulla riippuvuuden voi esimerkiksi määrittää valinnaiseksi. Tällöin se palauttaa null-arvon sen sijaan, että antaisi virheen, jos riippuvuutta ei ole määritetty.

// const logger = inject(Logger, { optional: true });

Injektiokontekstin ulkopuolella

inject-funktion kutsuminen injektiokontekstin ulkopuolella, esimerkiksi setTimeout-takaisinkutsussa, aiheuttaa virheen. Ottakaa riippuvuus talteen luonnin aikana.

Miksi inject-funktiota kannattaa suosia

inject toimii hyvin mixinien, kantaluokkien ja funktionaalisten APIen kanssa ja pitää komponenttiluokat tiiviinä. Se on suositeltu lähestymistapa nykyaikaisessa Angularissa.

Pikatarkistus: inject

Riippuvuuden noutaminen.

Vastaa interaktiivisessa oppitunnissa

Kertaus: inject

Opitte käyttämään inject()-funktiota nykyaikaisena tapana hankkia riippuvuuksia komponenteissa, palveluissa ja funktionaalisissa vartijoissa injektiokontekstin sisällä. Se vähentää toistuvaa koodia konstruktori-injektioon verrattuna ja tukee esimerkiksi optional-asetusta. Seuraavaksi: palveluntarjoajat ja laajuudet.

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 ”inject-funktio” ilmainen?

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

Ratkaiskaa riippuvuuksia inject-funktion avulla. 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 ”inject-funktio”-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