Angular Academy · Lekcja

Stylowanie hosta i host-context

Styluj element hosta komponentu.

Stylowanie hosta i host-context 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.

Stylowanie elementu hosta

Komponent jest renderowany wewnątrz własnego elementu hosta (znacznika selektora). Specjalna pseudoklasa :host pozwala stylować ten element z poziomu CSS komponentu.

Selektor :host

Użyj :host, aby wskazać własny element komponentu, na przykład w celu ustawienia sposobu wyświetlania i odstępów.

/* card.component.css */
:host {
  display: block;
  padding: 16px;
}

Dlaczego potrzebny jest :host

Bez :host nie można stylować elementu hosta z wnętrza komponentu, ponieważ selektory ograniczone do komponentu dopasowują tylko elementy znajdujące się w szablonie.

:host z warunkiem

Do :host() można przekazać selektor, aby stylować hosta tylko wtedy, gdy do niego pasuje, na przykład gdy ma określoną klasę.

:host(.active) {
  border: 2px solid green;
}

<!-- applies when host has class active -->
<app-card class="active"></app-card>

Powiązanie klasy hosta

Połącz :host() z powiązaniem klasy hosta, aby stylować komponent na podstawie jego własnego stanu.

@Component({
  selector: "app-card",
  host: { "[class.selected]": "isSelected" },
  styleUrl: "./card.component.css"
})
export class CardComponent {
  isSelected = true;
}

Selektor :host-context

:host-context() styluje komponent na podstawie warunku dotyczącego dowolnego elementu nadrzędnego, a nie samego hosta. Doskonale nadaje się do obsługi motywów.

:host-context(.dark-theme) {
  background: #222;
  color: #eee;
}

Przykład obsługi motywów

Jeśli element nadrzędny znajdujący się wyżej w drzewie ma klasę dark-theme, reguła zostanie zastosowana, co pozwoli jednemu elementowi nadrzędnemu zmienić wygląd zagnieżdżonych komponentów.

<body class="dark-theme">
  <app-card></app-card>
  <!-- card uses dark styles -->
</body>

:host a :host-context

:host sprawdza własny element komponentu, a :host-context sprawdza elementy nadrzędne. Używaj hosta do obsługi własnego stanu, a host-context do odziedziczonego kontekstu, takiego jak motyw.

Łączenie z elementami potomnymi

Można połączyć :host-context z selektorami elementów potomnych, aby stylować elementy wewnętrzne na podstawie kontekstu elementu nadrzędnego.

:host-context(.compact) .title {
  font-size: 12px;
}

Domyślne wyświetlanie hosta

Hosty elementów niestandardowych są domyślnie elementami liniowymi. Ustawienie display: block na :host jest często pierwszą regułą, dzięki której układ zachowuje się w przewidywalny sposób.

:host {
  display: block;
}

Zastosowania praktyczne

Używaj stylowania hosta do kontrolowania zewnętrznego obszaru komponentu, reagowania na jego własny stan i dostosowywania się do klas motywu otoczenia, zachowując jednocześnie enkapsulację i elastyczność stylów.

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat stylowania hosta.

Podsumowanie

Użyj :host, aby stylować własny element komponentu i jego stan, a :host-context(), aby reagować na klasy elementów nadrzędnych podczas obsługi motywów. Ustawienie display: block na hoście jest przydatną wartością domyślną.

Często zadawane pytania

Czy lekcja „Stylowanie hosta i host-context” jest bezpłatna?

Tak — pełny tekst „Stylowanie hosta i host-context” 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 „Stylowanie hosta i host-context”?

Styluj element hosta 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 3 z 4.

Ile czasu zajmuje lekcja „Stylowanie hosta i host-context”?

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