Angular - wstrzykiwanie treści do komponentu z wykorzystaniem projekcji

Stronę tą wyświetlono już: 69 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:

Listing 1
  1. <ng-content></ng-content>

Natomiast w komponencie rodzicu:

Listing 2
  1. <app-my-component>
  2. <h1>Title</h1>
  3. <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:

Listing 3
  1. <app-my-component>
  2. <h1 ngProjectAs="title">Title</h1>
  3. <p ngProjectAs="content">Jakaś przykładowa treść</p>
  4. <app-my-component>

i w kodzie HTML komponentu potomnego:

Listing 4
  1. <ng-content select="title"></ng-content>
  2. <p>Lorem impsum ...</p>
  3. <ng-content select="content"></ng-content>
  4. <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.

Komentarze