ng-template i ng-container
Definiować i osadzać fragmenty szablonów
ng-template i ng-container 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.
Szablony, które nie są renderowane
<ng-template> definiuje fragment znaczników, który nie jest renderowany, dopóki coś jawnie go nie utworzy. Stanowi podstawę dyrektyw strukturalnych, takich jak *ngIf.
Definiowanie szablonu
Treść wewnątrz <ng-template> pozostaje nieaktywna. Aby użyć jej w innym miejscu, należy nadać jej zmienną referencyjną.
<ng-template #empty>
<p>No items found.</p>
</ng-template>Renderowanie za pomocą ngTemplateOutlet
Do renderowania szablonu na podstawie odwołania należy użyć ngTemplateOutlet.
<ng-container *ngTemplateOutlet="empty"></ng-container>
<ng-template #empty>
<p>No items found.</p>
</ng-template>Dlaczego ng-container?
<ng-container> jest logicznym elementem nieobecnym w DOM, służącym do grupowania. Pozwala stosować dyrektywy lub grupować węzły bez dodawania dodatkowego elementu opakowującego do DOM.
Unikanie opakowujących elementów div
Bez ng-container można dodać niepotrzebny element <div> wyłącznie po to, aby umieścić na nim dyrektywę. ng-container znika z wyrenderowanego wyniku.
<ng-container *ngIf="user">
<h2>{{ user.name }}</h2>
<p>{{ user.email }}</p>
</ng-container>Grupowanie przepływu sterowania
ng-container świetnie nadaje się do opakowywania nowych bloków sterowania przepływem bez dodawania elementów DOM.
<ng-container *ngIf="ready">
@for (item of items; track item.id) {
<li>{{ item.name }}</li>
}
</ng-container>Kontekst szablonu
Szablony mogą otrzymywać obiekt kontekstu, udostępniając jego wartości za pomocą zmiennych let-.
<ng-template #row let-name="name">
<p>{{ name }}</p>
</ng-template>
<ng-container
*ngTemplateOutlet="row; context: { name: 'Ada' }">
</ng-container>Domyślna wartość kontekstu
Specjalna wartość kontekstu $implicit jest wiązana ze zmienną let-, która nie ma przypisanego klucza.
<ng-template #item let-value>
<span>{{ value }}</span>
</ng-template>
<ng-container
*ngTemplateOutlet="item; context: { $implicit: 42 }">
</ng-container>Szablony jako obiekty pierwszej klasy
#ref na elemencie <ng-template> jest obiektem TemplateRef. Można przekazać go jako @Input, aby komponent pozwalał konsumentom dostosowywać części interfejsu.
emptyTemplate = input<TemplateRef<unknown>>();ng-container jako host
ng-container jest również przydatny jako host miejsca docelowego dla dynamicznych komponentów lub szablonów, pomagając zachować przejrzysty DOM.
<ng-container *ngComponentOutlet="widgetComponent">
</ng-container>Kiedy używać którego elementu
ng-template: odroczone lub wielokrotnego użytku znaczniki. ng-container: grupowanie i obsługa dyrektyw bez dodawania elementów DOM. Elementy te często współpracują ze sobą.
Szybki test
Proszę sprawdzić swoją wiedzę na temat ng-template i ng-container.
Podsumowanie
Dowiedzieli się Państwo, że <ng-template> przechowuje nieaktywne znaczniki, które można utworzyć i renderować za pomocą ngTemplateOutlet (opcjonalnie z kontekstem), a <ng-container> grupuje węzły lub jest hostem dyrektyw bez dodawania elementów DOM.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 38
- Lekcje
- 144
Często zadawane pytania
Czy lekcja „ng-template i ng-container” jest bezpłatna?
Tak — pełny tekst „ng-template i ng-container” 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 „ng-template i ng-container”?
Definiować i osadzać fragmenty szablonów Ć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 „ng-template i ng-container”?
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