TemplateRef i ViewContainerRef
Renderować szablony dynamicznie
TemplateRef i ViewContainerRef 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.
Renderowanie imperatywne
Czasami treść trzeba renderować programowo, a nie deklaratywnie. Angular udostępnia elementy TemplateRef i ViewContainerRef, zapewniając niskopoziomową kontrolę.
TemplateRef
TemplateRef jest uchwytem do elementu <ng-template>. Reprezentuje znaczniki, które można utworzyć w późniejszym czasie.
tpl = viewChild.required<TemplateRef<unknown>>('tpl');ViewContainerRef
ViewContainerRef jest miejscem w DOM, do którego można dołączać widoki. Należy go wstrzyknąć, aby kontrolować renderowaną w nim treść.
private vcr = inject(ViewContainerRef);createEmbeddedView
Oba elementy współpracują ze sobą: createEmbeddedView tworzy instancję TemplateRef w ViewContainerRef.
this.vcr.createEmbeddedView(this.tpl());Przekazywanie kontekstu
Można przekazać obiekt kontekstu jako drugi argument, a następnie uzyskać do niego dostęp za pomocą zmiennych let-.
this.vcr.createEmbeddedView(this.tpl(), {
$implicit: 'Hello',
count: 3
});Usuwanie widoków
ViewContainerRef.clear() usuwa wszystkie utworzone przez siebie widoki. W ten sposób można włączać i wyłączać treść dynamiczną.
this.vcr.clear();Niestandardowa dyrektywa strukturalna
Ten wzorzec stanowi podstawę niestandardowych dyrektyw strukturalnych. Dyrektywa wstrzykuje oba odwołania i warunkowo renderuje treść.
@Directive({ selector: '[appUnless]' })
export class UnlessDirective {
private tpl = inject(TemplateRef<unknown>);
private vcr = inject(ViewContainerRef);
}Reagowanie na dane wejściowe
Setter danych wejściowych dyrektywy steruje operacjami create i clear, dzięki czemu widok pojawia się lub znika.
@Input() set appUnless(condition: boolean) {
if (!condition) {
this.vcr.createEmbeddedView(this.tpl);
} else {
this.vcr.clear();
}
}Wstawianie pod określonym indeksem
createEmbeddedView przyjmuje indeks, który pozwala kontrolować kolejność wstawiania względem sąsiednich widoków.
this.vcr.createEmbeddedView(this.tpl(), {}, 0);createComponent
ViewContainerRef może również dynamicznie tworzyć instancje komponentów za pomocą createComponent, który jest nowoczesnym następcą ComponentFactoryResolver.
const ref = this.vcr.createComponent(WidgetComponent);
ref.setInput('title', 'Hi');Sprzątanie
Widoki utworzone imperatywnie trzeba usuwać. Zniszczenie komponentu gospodarza automatycznie czyści jego ViewContainerRef, ale podczas ręcznego przełączania należy wywołać clear().
Szybki test
Proszę sprawdzić swoją wiedzę na temat renderowania imperatywnego.
Podsumowanie
Dowiedzieli się Państwo, że TemplateRef jest uchwytem do znaczników szablonu, ViewContainerRef jest miejscem wstawiania do DOM, a createEmbeddedView renderuje jeden element w drugim. Razem stanowią podstawę niestandardowych dyrektyw strukturalnych i dynamicznych komponentów.
Często zadawane pytania
Czy lekcja „TemplateRef i ViewContainerRef” jest bezpłatna?
Tak — pełny tekst „TemplateRef i ViewContainerRef” 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 „TemplateRef i ViewContainerRef”?
Renderować szablony dynamicznie Ć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 „TemplateRef i ViewContainerRef”?
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