Budowanie wielokrotnego użytku zachowań
Pakować zachowanie w kompozytowalne dyrektywy
Budowanie wielokrotnego użytku zachowań 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.
Zachowania jako klocki konstrukcyjne
API kompozycji pokazuje pełnię swoich możliwości, gdy projektują Państwo małe, wyspecjalizowane dyrektywy, z których każda hermetyzuje jedno zachowanie, a następnie w razie potrzeby dołączają je do komponentów.
Dyrektywa o jednym przeznaczeniu
Każde zachowanie powinno być niewielkie i samodzielne.
@Directive({
selector: '[appElevate]'
})
export class ElevateDirective {
@HostBinding('style.boxShadow')
shadow = '0 2px 8px rgba(0,0,0,.15)';
}Zachowanie po najechaniu
Inne zachowanie nasłuchuje na najechanie kursorem i przełącza klasę.
@Directive({ selector: '[appHoverClass]' })
export class HoverClassDirective {
@HostBinding('class.is-hover') hovering = false;
@HostListener('mouseenter') on() { this.hovering = true; }
@HostListener('mouseleave') off() { this.hovering = false; }
}Komponowanie zachowań
Komponent karty łączy oba zachowania bez konfigurowania ich w szablonie.
@Component({
selector: 'app-card',
hostDirectives: [ElevateDirective, HoverClassDirective],
template: '<ng-content></ng-content>'
})
export class CardComponent {}Ponowne użycie w komponentach
Te same zachowania można komponować z przyciskami, kafelkami lub panelami. Definiują je Państwo raz i używają wszędzie, bez powielania kodu.
Konfigurowalne zachowania
Dodaj wejścia, aby można było dostosowywać zachowanie, a następnie udostępnij je w miejscach, w których jest komponowane.
@Directive({ selector: '[appElevate]' })
export class ElevateDirective {
level = input(1);
}Udostępnianie pokrętła
Udostępnij konfigurowalne wejście, aby każdy host mógł je ustawić.
hostDirectives: [{
directive: ElevateDirective,
inputs: ['level']
}]Koordynowanie zachowań
Zachowania mogą wstrzykiwać się wzajemnie przez injector elementu, aby współpracować; na przykład efekt tętnienia może reagować na stan wciśnięcia.
Testowalność
Małe zachowania łatwo testować jednostkowo w izolacji, a następnie używać ich w kompozycji z większą pewnością, co poprawia ogólną niezawodność.
Konwencje nazewnicze
Nazywaj zachowania zgodnie z tym, co robią (appElevate, appHoverClass, appAutofocus). Jasne nazwy sprawiają, że kompozycja sama wyjaśnia swoją strukturę.
Biblioteka zachowań
Z czasem powstaje biblioteka komponowalnych zachowań, z których może korzystać dowolny komponent, co znacznie ogranicza powielanie logiki hosta.
Szybkie sprawdzenie
Sprawdź swoją wiedzę na temat zachowań wielokrotnego użytku.
Podsumowanie
Dowiedzieli się Państwo, jak projektować małe, samodzielne dyrektywy, z których każda hermetyzuje jedno zachowanie, komponować je za pomocą hostDirectives, udostępniać konfigurowalne wejścia oraz budować wielokrotnego użytku i łatwą do testowania bibliotekę zachowań.
Często zadawane pytania
Czy lekcja „Budowanie wielokrotnego użytku zachowań” jest bezpłatna?
Tak — pełny tekst „Budowanie wielokrotnego użytku zachowań” 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 „Budowanie wielokrotnego użytku zachowań”?
Pakować zachowanie w kompozytowalne dyrektywy Ć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 „Budowanie wielokrotnego użytku zachowań”?
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
- Właściwość hostDirectives
- Udostępnianie inputów i outputów
- Budowanie wielokrotnego użytku zachowań
- Kompozycja a dziedziczenie