Projekcja do wielu gniazd za pomocą select
Projektować zawartość do nazwanych gniazd
Projekcja do wielu gniazd za pomocą select 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.
Wiele slotów
Wiele komponentów potrzebuje kilku obszarów: nagłówka, treści i stopki. Angular obsługuje to za pomocą projekcji wieloslotowej, wykorzystując atrybut select elementu <ng-content>.
Atrybut select
Atrybut select przyjmuje selektor CSS. Każdy element <ng-content select="..."> przeprowadza projekcję tylko węzłów pasujących do tego selektora.
<ng-content select="[card-header]"></ng-content>
<ng-content select="[card-body]"></ng-content>Wybieranie według atrybutu
Selektory atrybutów są najczęściej stosowanym wzorcem, ponieważ są czytelne w znacznikach używanych przez konsumenta.
@Component({
selector: 'app-card',
template:
'<header><ng-content select="[header]"></ng-content></header>' +
'<main><ng-content select="[body]"></ng-content></main>'
})
export class CardComponent {}Korzystanie z nazwanych slotów
Konsument oznacza każdą część treści pasującym atrybutem.
<app-card>
<h2 header>Title</h2>
<p body>Some body text here.</p>
</app-card>Wybieranie według elementu lub klasy
Można również wybierać według nazwy elementu lub klasy CSS.
<ng-content select="card-title"></ng-content>
<ng-content select=".highlight"></ng-content>Slot przechwytujący wszystko
Element <ng-content> bez atrybutu select przechwytuje wszystko, co nie pasowało do nazwanego slotu. Należy umieścić go na końcu jako rozwiązanie zapasowe.
<ng-content select="[header]"></ng-content>
<ng-content></ng-content>Kolejność ma znaczenie
Angular analizuje sloty w kolejności występowania w szablonie. Każdy projekowany węzeł trafia do pierwszego pasującego slotu. Należy umieścić slot przechwytujący wszystko za konkretnymi selektorami, aby nie przechwycił całej treści.
Łączenie selektorów
Selektory CSS można łączyć, na przykład select="button[primary]" wskazuje element button z atrybutem primary.
<ng-content select="button[primary]"></ng-content>Komponent układu
Oto karta z miejscami na nagłówek, treść i stopkę oraz slotem przechwytującym wszystko.
@Component({
selector: 'app-card',
template:
'<header><ng-content select="[header]"></ng-content></header>' +
'<section><ng-content></ng-content></section>' +
'<footer><ng-content select="[footer]"></ng-content></footer>'
})
export class CardComponent {}Każdy węzeł jest projekowany raz
Dany projekowany węzeł pasuje tylko do jednego slotu i jest renderowany dokładnie raz. Projekcja nie pozwala sklonować tego samego węzła do dwóch slotów.
Stylowanie poszczególnych slotów
Ponieważ każdy slot znajduje się w osobnym miejscu DOM, można umieszczać sloty w stylowanych kontenerach (nagłówku lub stopce), aby nadać każdemu obszarowi własny wygląd.
Szybki test
Proszę sprawdzić swoją wiedzę na temat projekcji wieloslotowej.
Podsumowanie
Dowiedzieli się Państwo, jak budować komponenty wieloslotowe za pomocą <ng-content select="...">. Selektory mogą wskazywać atrybuty, elementy lub klasy; slot bez selektora przechwytuje całą pozostałą treść, a kolejność decyduje o tym, który slot zostanie wybrany.
Często zadawane pytania
Czy lekcja „Projekcja do wielu gniazd za pomocą select” jest bezpłatna?
Tak — pełny tekst „Projekcja do wielu gniazd za pomocą select” 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 „Projekcja do wielu gniazd za pomocą select”?
Projektować zawartość do nazwanych gniazd Ć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 „Projekcja do wielu gniazd za pomocą select”?
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
- Projekcja zawartości do jednego gniazda
- Projekcja do wielu gniazd za pomocą select
- ng-template i ng-container
- TemplateRef i ViewContainerRef