0Pricing
Angular Academy · Lekcja

Udostępnianie inputów i outputów

Udostępniać inputy i outputy dyrektywy hosta

Udostępnianie inputów i outputów to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 2 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.

Udostępnianie API złożonych dyrektyw

Podczas dołączania dyrektywy za pomocą hostDirectives jej dane wejściowe i wyjściowe są domyślnie ukryte. API kompozycji pozwala udostępnić wybrane dane wejściowe i wyjściowe w publicznym API hosta.

Postać obiektowa

Zamiast podawać samą klasę, użyj obiektu zawierającego tablice directive, inputs i outputs.

hostDirectives: [{
  directive: TooltipDirective,
  inputs: ['tooltipText'],
  outputs: ['tooltipShown']
}]

Udostępnianie wejścia

Umieszczenie nazwy wejścia w inputs umożliwia konsumentom powiązanie go z elementem hostującym.

<app-button tooltipText="Save changes"></app-button>

Udostępnianie wyjścia

Umieszczenie wyjścia sprawia, że host ponownie emituje zdarzenia tej dyrektywy.

<app-button (tooltipShown)="onShown()"></app-button>

Zmiana nazwy podczas udostępniania

Użyj formy publicName: internalName, aby zmienić nazwę wejścia lub wyjścia podczas jego udostępniania.

inputs: ['tooltipText: hint']
// consumers bind [hint]="..."

Zmiana nazw wyjść

Wyjścia zmienia się w ten sam sposób.

outputs: ['tooltipShown: shown']
// template: (shown)="..."

Dlaczego domyślnie ukrywać?

Ukrywanie złożonych wejść i wyjść pozwala zachować zamierzony interfejs API hosta. Udostępniają Państwo tylko to, co ma sens dla konsumentów, unikając ujawniania szczegółów wewnętrznych dyrektyw.

Łączenie z własnymi wejściami

Host może mieć własne wejścia obok udostępnionych; Angular scala je w jeden publiczny interfejs API elementu.

@Component({
  selector: 'app-button',
  hostDirectives: [{
    directive: TooltipDirective,
    inputs: ['tooltipText']
  }]
})
export class ButtonComponent {
  label = input('');
}

Konflikty nazw

Jeśli nazwa udostępnionego wejścia koliduje z własnym wejściem hosta, zmiana nazwy pozwala uniknąć konfliktu i jasno określić intencję.

Powiązania dwukierunkowe

Aby obsługiwać powiązanie dwukierunkowe przez kompozycję, udostępnij zarówno wejście, jak i odpowiadające mu wyjście Change, stosując spójne nazwy.

Dobra praktyka

Udostępniaj minimalny, odpowiednio nazwany interfejs potrzebny konsumentom. Zmieniaj nazwy wewnętrzne tak, aby pasowały do słownictwa komponentu, a nie używanej dyrektywy.

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat udostępniania wejść i wyjść.

Podsumowanie

Dowiedzieli się Państwo, że obiektowa forma hostDirectives udostępnia wybrane inputs i outputs w interfejsie API hosta, z opcjonalną zmianą nazw w formie publicName: internalName, dzięki czemu publiczny interfejs pozostaje celowo ograniczony.

Często zadawane pytania

Czy lekcja „Udostępnianie inputów i outputów” jest bezpłatna?

Tak — pełny tekst „Udostępnianie inputów i outputów” 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 „Udostępnianie inputów i outputów”?

Udostępniać inputy i outputy dyrektywy hosta Ć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 2 z 4.

Ile czasu zajmuje lekcja „Udostępnianie inputów i outputów”?

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

  1. Właściwość hostDirectives
  2. Udostępnianie inputów i outputów
  3. Budowanie wielokrotnego użytku zachowań
  4. Kompozycja a dziedziczenie
← Powrót do Angular Academy