Angular Academy · Lezione

La funzione inject

Risolva le dipendenze con la funzione inject.

La funzione inject è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

La funzione inject

La funzione inject() recupera una dipendenza dall'injector. È l'alternativa moderna all'injection delle dipendenze tramite parametri del costruttore.

Utilizzo di base

Chiami inject passando la classe desiderata e assegni il risultato a un campo.

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

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

Confronto con l'injection tramite costruttore

Lo stile precedente dichiarava le dipendenze come parametri del costruttore. inject() svolge lo stesso compito di un inizializzatore di campo, che spesso risulta più ordinato.

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

Dove è possibile chiamare inject

inject() deve essere eseguito in un contesto di injection: durante la costruzione di un componente, una direttiva o un servizio, oppure negli inizializzatori di campo e nelle funzioni factory dei provider.

Injection in un servizio

Usi inject anche all'interno dei servizi, ad esempio per ottenere HttpClient.

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

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

Meno codice ripetitivo

Con inject evita firme del costruttore molto lunghe. Ogni dipendenza è una semplice dichiarazione di campo, facile da leggere e riordinare.

Utilizzo dei servizi inseriti

Una volta inserito, chiami il servizio come un qualsiasi oggetto.

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

inject nelle guardie funzionali

Le guardie di routing funzionali e i resolver vengono eseguiti in un contesto di injection, quindi può chiamare inject al loro interno per accedere ai servizi.

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

Dipendenze opzionali

inject accetta opzioni, ad esempio per contrassegnare una dipendenza come opzionale, così restituisce null invece di generare un errore quando la dipendenza non è fornita.

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

Al di fuori del contesto di injection

Chiamare inject al di fuori di un contesto di injection (ad esempio in una callback setTimeout) genera un errore. Recuperi invece la dipendenza durante la costruzione.

Perché preferire inject

inject funziona bene con mixin, classi base e API funzionali e mantiene concise le classi dei componenti. È l'approccio consigliato nelle versioni moderne di Angular.

Verifica rapida: inject

Recupero di una dipendenza.

Riepilogo: inject

Ha imparato a usare la funzione inject() come metodo moderno per ottenere le dipendenze, utilizzabile nei componenti, nei servizi e nelle guardie funzionali all'interno di un contesto di injection. Riduce il codice ripetitivo rispetto all'injection tramite costruttore e supporta opzioni come optional. Prossimo argomento: provider e ambiti.

Domande Frequenti

La lezione «La funzione inject» è gratuita?

Sì — il testo completo di «La funzione inject» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «La funzione inject»?

Risolva le dipendenze con la funzione inject. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «La funzione inject»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy