Angular Academy · Lekcja

Tworzenie komponentów standalone

Deklaruj komponenty z flagą standalone.

Tworzenie komponentów standalone 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.

Tworzenie komponentu standalone

Komponent standalone to po prostu klasa ozdobiona dekoratorem @Component i oznaczona jako standalone. W Angular v19+ jest to opcja domyślna, więc często nie trzeba nawet wpisywać tej flagi.

Flaga standalone

Historycznie ustawiało się standalone: true w dekoratorze. W wersji v19 i nowszych komponenty są domyślnie standalone, więc flaga jest opcjonalna.

import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  standalone: true, // optional in v19+
  template: '<h1>Welcome</h1>'
})
export class GreetingComponent {}

Selektor

selector to znacznik niestandardowego elementu używany do umieszczania komponentu w szablonie, na przykład app-greeting.

// usage in another template:
// <app-greeting></app-greeting>

Szablon wbudowany

Właściwość template służy do umieszczania kodu HTML bezpośrednio w komponencie i jest idealna dla małych komponentów.

@Component({
  selector: 'app-badge',
  template: '<span class="badge">New</span>'
})
export class BadgeComponent {}

Szablon zewnętrzny

W przypadku większych widoków należy użyć templateUrl, aby wskazać plik HTML.

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html'
})
export class ProfileComponent {}

Style

Style ograniczone do komponentu można dodać za pomocą styles (wbudowane) albo styleUrl / styleUrls (zewnętrzne pliki).

@Component({
  selector: 'app-card',
  template: '<div class="card"></div>',
  styles: ['.card { padding: 16px; }']
})
export class CardComponent {}

Logika klasy komponentu

Ciało klasy przechowuje stan i zachowanie. W przypadku signals stan reaktywny należy deklarować jako pola.

import { Component, signal } from '@angular/core';

@Component({ selector: 'app-counter', template: '<p>{{ n() }}</p>' })
export class CounterComponent {
  n = signal(0);
}

Moduł nie jest potrzebny

Proszę zauważyć, że nie ma tu @NgModule ani tablicy declarations. Komponent jest gotowy do importowania wszędzie tam, gdzie jest potrzebny.

Konwencja nazewnictwa plików

Konwencja Angulara nadaje plikom nazwy takie jak greeting.component.ts, klasie GreetingComponent, a selektorowi app-greeting.

Używanie jednego komponentu wewnątrz innego

Aby użyć podrzędnego komponentu standalone, należy zaimportować go do tablicy imports komponentu nadrzędnego (zostanie to omówione w następnej lekcji), a następnie umieścić jego selektor w szablonie nadrzędnym.

Generowanie za pomocą CLI

Angular CLI domyślnie generuje komponenty standalone. Uruchomienie ng generate component greeting tworzy dla Państwa szkielet komponentu standalone GreetingComponent.

Szybkie sprawdzenie: tworzenie komponentów

Informacje o domyślnych ustawieniach standalone.

Podsumowanie: tworzenie komponentu standalone

Komponent standalone tworzy się za pomocą @Component, opcjonalnie ustawiając standalone: true (opcja domyślna w v19+). Należy zdefiniować selektor, template lub templateUrl, opcjonalne style oraz logikę klasy. NgModule nie jest wymagany. Dalej: bezpośrednie importowanie zależności.

Często zadawane pytania

Czy lekcja „Tworzenie komponentów standalone” jest bezpłatna?

Tak — pełny tekst „Tworzenie komponentów standalone” 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 „Tworzenie komponentów standalone”?

Deklaruj komponenty z flagą standalone. Ć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 „Tworzenie komponentów standalone”?

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