Angular Academy · Lekcja

Style ograniczone do komponentu

Ograniczaj style do pojedynczego komponentu.

Style ograniczone do komponentu to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 1 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.

Style należą do komponentów

Angular pozwala każdemu komponentowi zawierać własny CSS. Domyślnie te style są ograniczone zakresem, co oznacza, że wpływają tylko na template tego komponentu, a nie na resztę strony.

Tablica stylów inline

Style można zdefiniować bezpośrednio w dekoratorze @Component za pomocą tablicy styles.

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

Zewnętrzne styleUrl

Częściej wskazuje się jeden lub więcej zewnętrznych arkuszy stylów za pomocą styleUrls.

@Component({
  selector: "app-card",
  templateUrl: "./card.component.html",
  styleUrls: ["./card.component.css"]
})
export class CardComponent {}

Skrót styleUrl

W przypadku pojedynczego arkusza nowoczesny Angular obsługuje właściwość styleUrl w liczbie pojedynczej.

@Component({
  selector: "app-card",
  templateUrl: "./card.component.html",
  styleUrl: "./card.component.css"
})
export class CardComponent {}

Zakres działania w praktyce

Reguła .card w jednym komponencie nie przeniknie do innego komponentu, który również używa klasy card. Każdy z nich jest odizolowany.

/* card.component.css */
.card { color: navy; }
/* this navy color stays inside CardComponent only */

Jak działa ograniczanie zakresu

Angular dodaje unikatowe atrybuty do elementów komponentu i przepisuje jego selektory CSS tak, aby do nich pasowały. Dzięki temu style działają tylko w obrębie tego komponentu.

<!-- generated markup -->
<div class="card" _ngcontent-abc>Hello</div>

/* generated css */
.card[_ngcontent-abc] { color: navy; }

Style nie przenikają do środka

Podobnie jak Twoje style pozostają wewnątrz, większość zewnętrznych stylów nie nadpisuje przypadkowo reguł komponentu, dzięki czemu komponenty są samodzielne.

Style globalne

W przypadku stylów obowiązujących w całej aplikacji użyj globalnego pliku styles.css wymienionego w angular.json. Te style nie są ograniczone zakresem.

/* src/styles.css - global */
body { font-family: system-ui; }

Wiele arkuszy stylów

Komponent może ładować kilka arkuszy stylów, wymieniając je w tablicy.

@Component({
  selector: "app-page",
  styleUrls: ["./base.css", "./layout.css"]
})
export class PageComponent {}

Używanie wiązań klas

Style ograniczone zakresem dobrze współpracują z wiązaniami klas, które pozwalają warunkowo stosować reguły.

<div class="card" [class.featured]="isFeatured"></div>

/* card.component.css */
.featured { border-color: gold; }

Dlaczego ograniczanie zakresu pomaga

Style ograniczone zakresem zapobiegają kolizjom nazw w dużej aplikacji, pozwalają zespołom pracować niezależnie oraz sprawiają, że komponenty są przenośne i łatwe do zrozumienia.

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat stylów ograniczonych do komponentu.

Podsumowanie

Komponenty mogą zawierać CSS za pomocą styles, styleUrls lub styleUrl. Domyślnie reguły te są ograniczone do komponentu, co zapobiega konfliktom. W przypadku reguł dotyczących całej aplikacji użyj globalnego arkusza stylów.

Często zadawane pytania

Czy lekcja „Style ograniczone do komponentu” jest bezpłatna?

Tak — pełny tekst „Style ograniczone do komponentu” 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 „Style ograniczone do komponentu”?

Ograniczaj style do pojedynczego komponentu. Ć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 1 z 4.

Ile czasu zajmuje lekcja „Style ograniczone do komponentu”?

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