Angular - wstrzykiwanie treści do komponentu z wykorzystaniem projekcji

Autor podstrony: Krzysztof Zajączkowski

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:

<ng-content></ng-content>

Natomiast w komponencie rodzicu:

<app-my-component> <h1>Title</h1> <app-my-component>

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:

<app-my-component> <h1 ngProjectAs="title">Title</h1> <p ngProjectAs="content">Jakaś przykładowa treść</p> <app-my-component>

i w kodzie HTML komponentu potomnego:

<ng-content select="title"></ng-content> <p>Lorem impsum ...</p> <ng-content select="content"></ng-content> <ng-content select="title"></ng-content>

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.

Propozycje książek