Projekcja zawartości do jednego gniazda
Projektować zawartość za pomocą ng-content
Projekcja zawartości do jednego gniazda 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.
Czym jest projekcja treści
Projekcja treści pozwala komponentowi otrzymywać znaczniki od komponentu nadrzędnego i renderować je we własnym szablonie. Jest odpowiednikiem mechanizmu „slotów” z komponentów webowych w Angularze.
Komponent nadrzędny umieszcza treść między znacznikami komponentu, a komponent decyduje, gdzie ta treść się pojawi.
Dlaczego jest to potrzebne
Wielokrotnego użytku opakowania, takie jak karty, okna dialogowe i panele, nie znają wcześniej swojej treści. Projekcja treści zmienia je w elastyczne kontenery.
- Komponent karty można zbudować raz i wypełniać go dowolną treścią
- Logika układu pozostaje w komponencie
- Treść pozostaje po stronie użytkownika komponentu
Element ng-content
Element <ng-content> wyznacza miejsce, w którym zostanie umieszczona projekowana treść. Konfiguracja z pojedynczym slotem używa dokładnie jednego elementu <ng-content>, bez atrybutu select.
@Component({
selector: 'app-card',
template: '<div class="card"><ng-content></ng-content></div>'
})
export class CardComponent {}Używanie komponentu
Wszystko, co komponent nadrzędny umieści między znacznikami komponentu, zostanie przekazane do slotu.
<app-card>
<h2>Hello</h2>
<p>This text is projected into the card.</p>
</app-card>Pojedynczy slot = jedno miejsce
W przypadku jednego nienazwanego slotu wszystkie projekowane węzły trafiają do jednego elementu <ng-content>. Nie ma filtrowania, a kolejność jest zachowywana dokładnie tak, jak zapisano ją w komponencie nadrzędnym.
Treść domyślna
W elemencie <ng-content> można umieścić zapasowe znaczniki. Nowoczesny Angular renderuje tę treść domyślną tylko wtedy, gdy konsument nie przekaże niczego do danego slotu.
<div class="card">
<ng-content>No content provided.</ng-content>
</div>Stylowanie projekowanej treści
Projekowana treść należy do widoku komponentu nadrzędnego, dlatego jest stylowana za pomocą stylów komponentu nadrzędnego, a nie karty. Aby uzyskać dostęp do projekowanych węzłów z poziomu karty, należy oszczędnie używać ::ng-deep lub polegać na stylach globalnych.
Treść a widok
Angular rozróżnia dzieci treści (projekowane do środka) od dzieci widoku (zadeklarowanych w szablonie). Ma to znaczenie w przypadku zapytań takich jak contentChild i viewChild.
icon = contentChild(IconComponent);Cykl życia: ngAfterContentInit
Projekowana treść jest dostępna po uruchomieniu ngAfterContentInit(). Należy użyć tej metody (lub ngAfterContentChecked), aby bezpiecznie odczytywać dzieci treści.
ngAfterContentInit() {
console.log('Projected content ready');
}Praktyczny przykład panelu
Oto kompletny panel wielokrotnego użytku. Konsument w pełni kontroluje jego zawartość, a panel kontroluje strukturę zewnętrzną.
@Component({
selector: 'app-panel',
template: '<section class="panel"><ng-content></ng-content></section>',
styles: ['.panel { border: 1px solid #ccc; padding: 16px; }']
})
export class PanelComponent {}Częsty błąd
Umieszczenie tego samego nienazwanego elementu <ng-content> dwa razy nie powoduje zduplikowania treści. Angular przeprowadza projekcję tylko do ostatniego pasującego slotu. Jeśli potrzebują Państwo wielu obszarów, należy użyć projekcji wieloslotowej.
Szybki test
Proszę sprawdzić swoją wiedzę na temat projekcji z pojedynczym slotem.
Podsumowanie
Dowiedzieli się Państwo, że projekcja treści używa elementu <ng-content> do renderowania znaczników dostarczonych przez komponent nadrzędny wewnątrz komponentu. Projekcja z pojedynczym slotem używa jednego nienazwanego miejsca, projekowana treść należy do widoku komponentu nadrzędnego, a staje się dostępna w ngAfterContentInit.
Często zadawane pytania
Czy lekcja „Projekcja zawartości do jednego gniazda” jest bezpłatna?
Tak — pełny tekst „Projekcja zawartości do jednego gniazda” 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 zawartości do jednego gniazda”?
Projektować zawartość za pomocą ng-content Ć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 „Projekcja zawartości do jednego gniazda”?
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