Angular - wstrzykiwanie treści do komponentu z wykorzystaniem projekcji
Stronę tą wyświetlono już: 1942 razy
Przy tworzeniu bardziej złożonych komponentów może okazać się konieczne wstrzykiwanie zawartości do wnętrza komponentu potomnego. Takie wstrzykiwanie jest możliwe przy wykorzystaniu mechanizmu projekcji, który wykorzystując specjalną dyrektywę ng-content do osadzania elementów pochodzących od rodzica wewnątrz swojego kodu HTML. Jeżeli pragniesz umieścić wewnątrz swojego komponentu tylko jeden element pochodzący od rodzica, wtedy to wystarczy w kodzie komponentu umieścić dyrektywę ng-content:
Natomiast w komponencie rodzicu:
Powyższe rozwiązanie umożliwia zamieszczenie tylko jednego elementu wewnątrz komponentu potomnego. Da się jednak przekazać kilka oddzielnych elementów, które mogą a nawet i muszą zostać osadzone wewnątrz komponentu podrzędnego w różnych częściach kodu HTML. Oto przykład:
W kodzie HTML rodzica:
i w kodzie HTML komponentu potomnego:
Jak widać mechanizm projekcji wykorzystuje do osadzania poszczególnych elementów dyrektywę ng-content z właściwością ngProjectAs, która umożliwia wyróżnienie osadzanego kodu i osadzenie go w określonym miejscu komponentu dziecka. Dzieje się to za sprawą właściwości select, która może brać pod uwagę wartości właściwości: ngProjectAs, class lub znacznika HTML.
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie IV
Autor:
Adam Freeman
Tytuł:
Angular. Programowanie z użyciem języka TypeScript. Wydanie II
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
ASP.NET Core, Angular i Bootstrap. Kompletny przybornik front-end developera
Autor:
Simone Chiaretta
Tytuł:
Angular instalacja i działanie. Nauka krok po kroku
Autor:
Shyam Seshadri
Tytuł:
Angular w akcji
Autor:
Jeremy Wilken
Tytuł:
ASP.NET Core 2 i Angular 5. Przewodnik dla Full-Stack Web Developera
Autor:
Valerio De Sanctis
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie II
Autor:
Adam Freeman
Tytuł:
Angular 2. Programowanie z użyciem języka TypeScript
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
Angular 2. Tworzenie interaktywnych aplikacji internetowych
Autor:
Gion Kunz