Angular Academy · Lektion

Funktionen inject

Find dependencies med funktionen inject.

Lektion 2 af 413 trin

Funktionen inject er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Angular Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Angular Academy-kurset indeholder 4 lektioner i alt.

Funktionen inject

Funktionen inject() henter en afhængighed fra injektoren. Det er det moderne alternativ til injicering via constructor-parametre.

Grundlæggende brug

Kald inject med den klasse, du vil bruge, og tildel resultatet til et felt.

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

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

Sammenlignet med constructor-injicering

Den ældre stil deklarerer afhængigheder som constructor-parametre. inject() udfører den samme opgave som en feltinitialisering, hvilket ofte er mere overskueligt.

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

Hvor inject kan kaldes

inject() skal køre i en injektionskontekst: under konstruktionen af en komponent, et direktiv eller en service eller i feltinitialiseringer og factory-funktioner for providere.

Injicering i en service

Brug også inject i services, f.eks. til at hente HttpClient.

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

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

Mindre boilerplate

Med inject undgår du lange constructor-signaturer. Hver afhængighed er blot en enkel feltdeklaration, som er nem at læse og omorganisere.

Brug af injicerede services

Når en service er injiceret, kalder du den som ethvert andet objekt.

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

inject i funktionelle guards

Funktionelle route guards og resolvers kører i en injektionskontekst, så du kan kalde inject i dem for at få adgang til services.

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

Valgfrie afhængigheder

inject accepterer indstillinger, f.eks. at markere en afhængighed som valgfri, så den returnerer null i stedet for at kaste en fejl, når afhængigheden ikke er angivet.

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

Uden for en injektionskontekst

Hvis du kalder inject uden for en injektionskontekst (f.eks. i en setTimeout-callback), kastes der en fejl. Hent i stedet afhængigheden under konstruktionen.

Hvorfor foretrække inject

inject fungerer godt sammen med mixins, basisklasser og funktionelle API'er og holder komponentklasser korte. Det er den anbefalede tilgang i moderne Angular.

Hurtigt tjek: inject

Hentning af en afhængighed.

Besvar den i den interaktive lektion

Opsummering: inject

Du har lært funktionen inject() som den moderne måde at hente afhængigheder på. Den kan bruges i komponenter, services og funktionelle guards inden for en injektionskontekst. Den reducerer boilerplate sammenlignet med constructor-injicering og understøtter indstillinger som optional. Næste emne er providere og scopes.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 38
Lektioner: 144

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Funktionen inject” gratis?

Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Funktionen inject”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Angular Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Funktionen inject”?

Find dependencies med funktionen inject. Du øver dig i Angular Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Angular Academy?

Der kræves ingen tidligere erfaring. Angular Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Funktionen inject”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Angular Academy-lektion?

Ja. Alle Angular Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Angular Academy