Angular Academy · Lekcja

Kompozycja a dziedziczenie

Preferować kompozycję przy współdzieleniu zachowania

Kompozycja a dziedziczenie 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.

Dwie strategie ponownego użycia

Aby współdzielić zachowanie między komponentami, można użyć dziedziczenia (rozszerzyć klasę bazową) lub kompozycji (połączyć mniejsze elementy). API kompozycji Angulara sprawia, że kompozycja jest preferowanym rozwiązaniem domyślnym.

Powtórzenie informacji o dziedziczeniu

W przypadku dziedziczenia komponent rozszerza komponent bazowy lub dyrektywę i ponownie wykorzystuje ich wejścia, wyjścia oraz logikę.

export class FancyButton extends BaseButton {
  // inherits BaseButton members
}

Ograniczenia dziedziczenia

Klasa może rozszerzać tylko jedną klasę bazową. Głębokie hierarchie stają się sztywne, a dziedziczą Państwo wszystko, również elementy, których nie potrzebują.

Problem diamentu

Łączenie wielu zachowań za pomocą dziedziczenia jest niemożliwe bez niewygodnych łańcuchów. Kompozycja omija ten problem, stosując wiele dyrektyw niezależnie.

Powtórzenie informacji o kompozycji

W kompozycji komponent zachowuje wąski zakres odpowiedzialności i dołącza zachowania za pomocą hostDirectives, łącząc ich tyle, ile potrzeba.

hostDirectives: [ElevateDirective, RippleDirective, FocusTrapDirective]

Preferuj kompozycję

Wskazówka „preferuj kompozycję zamiast dziedziczenia” ma szczególne zastosowanie w Angularze: kompozycja jest elastyczna, rozszerzalna i pozwala uniknąć kruchych klas bazowych.

Kiedy dziedziczenie nadal się sprawdza

Dziedziczenie może być dobrym rozwiązaniem w przypadku jednej stabilnej klasy bazowej współdzielonej przez blisko spokrewnione warianty, na przykład bazowego pola formularza, które warianty specjalizują. Hierarchie powinny pozostać płytkie.

Łączenie obu podejść

Można łączyć oba podejścia: rozszerzyć cienką klasę bazową w celu współdzielenia struktury, a zachowania przekrojowe realizować za pomocą kompozycji.

Hermetyzacja

Kompozycja zachowuje szczegóły wewnętrzne każdego zachowania jako prywatne i udostępnia tylko wybrane wejścia i wyjścia, podczas gdy dziedziczenie ujawnia cały interfejs API klasy bazowej.

Refaktoryzacja w kierunku kompozycji

Gdy klasa bazowa gromadzi niepowiązane odpowiedzialności, rozdziel każdą z nich na dyrektywę i skomponuj je. Rezultat jest bardziej modularny i łatwiejszy do testowania.

Wskazówki dotyczące wyboru

Potrzebujesz wielu niezależnych zachowań? Zastosuj kompozycję. Potrzebujesz jednej współdzielonej podstawy strukturalnej? Wystarczy płytka klasa bazowa. Domyślnie wybieraj kompozycję ze względu na jej elastyczność.

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat kompozycji i dziedziczenia.

Podsumowanie

Dowiedzieli się Państwo, że kompozycja (łączenie wyspecjalizowanych zachowań za pomocą hostDirectives) jest bardziej elastyczna niż dziedziczenie (pojedyncza klasa bazowa), pozwala unikać kruchych hierarchii i powinna być rozwiązaniem domyślnym, a płytkie dziedziczenie należy zachować dla współdzielonej struktury.

Często zadawane pytania

Czy lekcja „Kompozycja a dziedziczenie” jest bezpłatna?

Tak — pełny tekst „Kompozycja a dziedziczenie” 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 „Kompozycja a dziedziczenie”?

Preferować kompozycję przy współdzieleniu zachowania Ć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 „Kompozycja a dziedziczenie”?

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