Angular Academy · Lekcja

Właściwość hostDirectives

Dołączać dyrektywy do hosta komponentu

Lekcja 1 z 413 kroki

Właściwość hostDirectives 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.

API kompozycji dyrektyw

API kompozycji dyrektyw pozwala komponentowi lub dyrektywie deklaratywnie zastosować inne dyrektywy do własnego elementu hosta za pośrednictwem właściwości hostDirectives. Umożliwia to ponowne użycie bez dziedziczenia.

Rozwiązywany problem

Wcześniej, aby ponownie użyć zachowania dyrektywy, trzeba było powtarzać dyrektywę w każdym szablonie albo używać dziedziczenia. hostDirectives bezpośrednio łączy zachowania z hostem.

Podstawowa składnia

Wymień dyrektywy w tablicy hostDirectives w metadanych komponentu.

@Component({
  selector: 'app-menu',
  hostDirectives: [CdkTrapFocus],
  template: '<ng-content></ng-content>'
})
export class MenuComponent {}

Co się dzieje

Angular automatycznie stosuje CdkTrapFocus do każdego elementu hosta app-menu. Odbiorcy od razu otrzymują to zachowanie, bez konieczności samodzielnego dodawania dyrektywy.

Wymagania

Dyrektywy hosta muszą być samodzielne. Należy odwoływać się bezpośrednio do klasy dyrektywy, a nie do jej selektora.

Wiele dyrektyw hosta

Połącz kilka zachowań, umieszczając je wszystkie na liście.

hostDirectives: [
  HighlightDirective,
  TooltipDirective,
  CdkTrapFocus
]

Stosowanie do dyrektywy

Dyrektywa również może mieć dyrektywy hosta, co pozwala tworzyć warstwowe i łatwe do komponowania zachowania.

@Directive({
  selector: '[appCard]',
  hostDirectives: [HoverElevateDirective]
})
export class CardDirective {}

Kolejność cyklu życia

Dyrektywy hosta są tworzone przed wykonaniem logiki konstruktora samego hosta, dzięki czemu ich konfiguracja jest dostępna podczas inicjalizacji hosta.

Wstrzykiwanie zależności

Dyrektywy hosta można wstrzykiwać do hosta (i odwrotnie) za pośrednictwem wstrzykiwacza elementu, co umożliwia koordynację między złożonymi zachowaniami.

private trap = inject(CdkTrapFocus);

Bez zmian w szablonie

Najważniejsza korzyść: użytkownicy app-menu nie muszą wiedzieć o istnieniu CdkTrapFocus. Zachowanie jest zamknięte w definicji komponentu.

Kiedy warto użyć

Używaj hostDirectives, aby przejrzyście i wielokrotnie dołączać do komponentów lub dyrektyw zachowania przekrojowe, takie jak blokada fokusu, efekt ripple czy analityka.

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat hostDirectives.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Dowiedział się Pan/Dowiedziała się Pani, że właściwość hostDirectives automatycznie stosuje samodzielne dyrektywy do elementu hosta komponentu lub dyrektywy, umożliwiając ponowne wykorzystanie zachowań dzięki kompozycji, bez zmian w szablonach i bez dziedziczenia.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 38
Lekcje: 144

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Właściwość hostDirectives” jest bezpłatna?

Tak — pełny tekst „Właściwość hostDirectives” 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 „Właściwość hostDirectives”?

Dołączać dyrektywy do 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 1 z 4.

Ile czasu zajmuje lekcja „Właściwość hostDirectives”?

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