Angular Academy · Lekcja

Bezpośrednie importowanie zależności

Dodawaj importy do komponentu zamiast do modułu.

Bezpośrednie importowanie zależności to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 3 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.

Bezpośrednie importowanie zależności

Komponent standalone deklaruje używane elementy we własnej tablicy imports. Zastępuje to podział na deklaracje i importy w NgModule.

Tablica imports

Do tablicy imports dekoratora @Component należy dodać inne komponenty standalone, dyrektywy i pipe’y.

import { Component } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  imports: [ChildComponent],
  template: '<app-child></app-child>'
})
export class ParentComponent {}

Importowanie innych komponentów

Aby renderować komponent podrzędny w szablonie, należy zaimportować jego klasę. Wtedy można używać jego selektora.

Importowanie dyrektyw

Dyrektywy standalone importuje się w ten sam sposób. Po zaimportowaniu można stosować je w szablonie.

import { Component } from '@angular/core';
import { HighlightDirective } from './highlight.directive';

@Component({
  selector: 'app-note',
  imports: [HighlightDirective],
  template: '<p appHighlight>Note</p>'
})
export class NoteComponent {}

Importowanie pipe’ów

Pipe’y standalone również umieszcza się w tablicy imports. Na przykład zaimportowanie własnego pipe’a pozwala używać go w interpolacji.

Typowe dyrektywy Angulara

Niektóre wbudowane narzędzia pochodzą z pakietów. Na przykład RouterLink pochodzi z @angular/router i musi zostać zaimportowany, aby można było go użyć.

import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-nav',
  imports: [RouterLink],
  template: '<a routerLink="/home">Home</a>'
})
export class NavComponent {}

FormsModule i podobne moduły

Do komponentu standalone można również importować istniejące NgModules. Importowanie FormsModule włącza funkcje formularzy sterowanych szablonem, takie jak ngModel.

import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-form',
  imports: [FormsModule],
  template: '<input [(ngModel)]="name">'
})
export class FormComponent {
  name = '';
}

Wbudowany przepływ sterowania nie wymaga importu

Wbudowane bloki przepływu sterowania (if, for, switch, defer) są częścią samego języka szablonów, więc nie wymagają importu. Różni je to od starszych dyrektyw strukturalnych.

Importuj tylko to, czego używasz

Importy powinny być minimalne: należy wymieniać tylko zależności, do których szablon faktycznie się odwołuje. Dzięki temu komponenty pozostają lekkie i możliwe do optymalizacji za pomocą tree-shaking.

Importowanie wielu elementów

Tablica imports może zawierać wiele elementów jednocześnie.

imports: [ChildComponent, HighlightDirective, RouterLink, FormsModule]

Błędy kompilacji wskazują rozwiązanie

Jeśli użyją Państwo selektora lub pipe’a, który nie został zaimportowany, Angular zgłosi jasny błąd informujący, że element nie jest znany w tym komponencie. Aby go naprawić, należy dodać element do imports.

Szybkie sprawdzenie: importy

Gdzie umieszcza się zależności komponentów standalone?

Podsumowanie: bezpośrednie importy

Komponenty standalone wymieniają swoje zależności w tablicy imports komponentu: mogą to być inne komponenty, dyrektywy, pipe’y, a nawet NgModules, takie jak FormsModule. Wbudowany przepływ sterowania nie wymaga importu. Importy powinny być minimalne. Dalej: uruchamianie aplikacji standalone.

Często zadawane pytania

Czy lekcja „Bezpośrednie importowanie zależności” jest bezpłatna?

Tak — pełny tekst „Bezpośrednie importowanie zależności” 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 „Bezpośrednie importowanie zależności”?

Dodawaj importy do komponentu zamiast do modułu. Ć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 3 z 4.

Ile czasu zajmuje lekcja „Bezpośrednie importowanie zależności”?

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.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy