Funkcja inject
Rozwiązuj zależności za pomocą funkcji inject.
Funkcja inject to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.
Funkcja inject
Funkcja inject() pobiera zależność ze wstrzykiwacza. Jest nowoczesną alternatywą dla wstrzykiwania zależności przez parametry konstruktora.
Podstawowe użycie
Należy wywołać inject z klasą, która jest potrzebna, i przypisać wynik do pola.
import { Component, inject } from '@angular/core';
import { DataService } from './data.service';
@Component({ selector: 'app-x', template: '' })
export class XComponent {
private data = inject(DataService);
}W porównaniu ze wstrzykiwaniem przez konstruktor
Starszy styl polega na deklarowaniu zależności jako parametrów konstruktora. inject() wykonuje to samo zadanie co inicjalizator pola i często pozwala uzyskać czytelniejszy kod.
// old style:
// constructor(private data: DataService) {}Gdzie można wywoływać inject
inject() musi działać w kontekście wstrzykiwania: podczas tworzenia komponentu, dyrektywy lub usługi, a także w inicjalizatorach pól i funkcjach fabrycznych dostawców.
Wstrzykiwanie w usłudze
Funkcji inject można używać również wewnątrz usług, na przykład do pobrania HttpClient.
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({ providedIn: 'root' })
export class Api {
private http = inject(HttpClient);
}Mniej kodu pomocniczego
Funkcja inject pozwala uniknąć długich sygnatur konstruktorów. Każda zależność jest prostą deklaracją pola, którą łatwo odczytać i zmienić jej kolejność.
Korzystanie ze wstrzykniętych usług
Po wstrzyknięciu z usługi można korzystać jak z dowolnego obiektu.
export class XComponent {
private store = inject(CounterStore);
add() { this.store.increment(); }
}inject w strażnikach funkcyjnych
Funkcyjne strażniki tras i resolvery działają w kontekście wstrzykiwania, dlatego można wywoływać w nich inject, aby uzyskiwać dostęp do usług.
// export const authGuard = () => {
// const auth = inject(AuthService);
// return auth.isLoggedIn();
// };Opcjonalne zależności
Funkcja inject przyjmuje opcje, na przykład pozwalające oznaczyć zależność jako opcjonalną. Wtedy, jeśli nie została dostarczona, funkcja zwróci null zamiast zgłosić błąd.
// const logger = inject(Logger, { optional: true });Poza kontekstem wstrzykiwania
Wywołanie inject poza kontekstem wstrzykiwania, na przykład w funkcji zwrotnej setTimeout, powoduje zgłoszenie błędu. Zamiast tego należy pobrać zależność podczas tworzenia obiektu.
Dlaczego warto używać inject
inject dobrze współpracuje z domieszkami, klasami bazowymi i interfejsami funkcyjnymi, a także pozwala zachować zwięzłość klas komponentów. Jest zalecanym podejściem w nowoczesnym Angularze.
Szybkie sprawdzenie: inject
Pobieranie zależności.
Podsumowanie: inject
Poznali Państwo funkcję inject() jako nowoczesny sposób uzyskiwania zależności. Można jej używać w komponentach, usługach i strażnikach funkcyjnych działających w kontekście wstrzykiwania. Ogranicza ilość kodu pomocniczego w porównaniu ze wstrzykiwaniem przez konstruktor i obsługuje opcje, takie jak optional. Następnie: dostawcy i zakresy.
Często zadawane pytania
Czy lekcja „Funkcja inject” jest bezpłatna?
Tak — pełny tekst „Funkcja inject” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Funkcja inject”?
Rozwiązuj zależności za pomocą funkcji inject. Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Angular Academy?
Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Funkcja inject”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?
Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.