Angular Academy · Lekcja

Dynamiczne klasy i style

Reaktywnie wiąż klasy i style.

Dynamiczne klasy i style to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 4 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.

Dynamiczne stylowanie w szablonach

Angular pozwala powiązać klasy i style wbudowane ze stanem komponentu, dzięki czemu interfejs automatycznie aktualizuje się wraz ze zmianą danych.

Powiązanie pojedynczej klasy

Użyj [class.name], aby przełączać jedną klasę CSS na podstawie wyrażenia logicznego.

<div [class.active]="isActive">Item</div>

// component
isActive = true;

Wiele klas za pomocą ngClass

ngClass stosuje jednocześnie kilka klas, korzystając z obiektu, w którym nazwy klas są przypisane do wartości logicznych.

<div [ngClass]="{ active: isActive, disabled: isDisabled }">
  Item
</div>

ngClass z tablicami i ciągami znaków

ngClass akceptuje również ciąg nazw klas lub tablicę.

<div [ngClass]="'box highlighted'"></div>
<div [ngClass]="['box', 'rounded']"></div>

Powiązanie pojedynczego stylu

Użyj [style.property], aby powiązać jedną właściwość wbudowanego CSS z wartością.

<p [style.color]="textColor">Hello</p>

// component
textColor = "tomato";

Powiązania stylów z jednostkami

Dodaj sufiks jednostki, aby powiązać wartości liczbowe z jednostkami takimi jak piksele lub procenty.

<div [style.width.px]="boxWidth"></div>
<div [style.height.%]="boxHeight"></div>

// component
boxWidth = 200;
boxHeight = 50;

Wiele stylów za pomocą ngStyle

ngStyle ustawia jednocześnie kilka stylów wbudowanych na podstawie obiektu.

<div [ngStyle]="{ color: textColor, 'font-size.px': size }">
  Styled
</div>

Powiązanie klasy ma pierwszeństwo w konflikcie

Gdy klasy statyczne i powiązane się pokrywają, Angular je łączy. Powiązanie określa, czy dynamiczna klasa jest obecna, nie usuwając klas statycznych.

<div class="card" [class.active]="isActive"></div>
<!-- card always present; active toggles -->

Reagowanie na stan

Powiązania są ponownie obliczane podczas wykrywania zmian, dlatego aktualizacja właściwości komponentu natychmiast zmienia styl elementu.

toggle() {
  this.isActive = !this.isActive;
}

Wybór między klasą a stylem

Ze względów związanych z łatwością utrzymania preferuj powiązania klas z regułami CSS. Bezpośrednie powiązania stylów pozostaw dla rzeczywiście dynamicznych wartości, takich jak obliczana szerokość lub kolor.

Z sygnałami

Powiązania klas i stylów działają również z sygnałami — wystarczy wywołać sygnał w wyrażeniu szablonu.

<div [class.active]="isActive()"></div>

// component
isActive = signal(true);

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat dynamicznych klas i stylów.

Podsumowanie

Przełączaj jedną klasę za pomocą [class.name] lub wiele klas za pomocą ngClass; ustawiaj jeden styl za pomocą [style.prop] (z opcjonalną jednostką) lub wiele stylów za pomocą ngStyle. Powiązania automatycznie reagują na stan, w tym na sygnały.

Często zadawane pytania

Czy lekcja „Dynamiczne klasy i style” jest bezpłatna?

Tak — pełny tekst „Dynamiczne klasy i style” 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 „Dynamiczne klasy i style”?

Reaktywnie wiąż klasy i style. Ć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 4 z 4.

Ile czasu zajmuje lekcja „Dynamiczne klasy i style”?

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