Što je projekcija sadržaja s ng-content?

Question

IT Interview Practice · Accepted Answer

**Projekcija sadržaja** omogućuje komponenti da **prihvati i prosledi markup proslijeđen od strane roditelja** — postavljen putem ``. To je kako gradite fleksibilne, ponovno iskoristive wrapper komponente (kartice, dijaloge, rasporede) čiji unutarnji sadržaj kontrolira konzument. (To je Angular ekvivalent Vue/web-component slots-a i React-ovog `children`.) ## Projekcija s jednim slot-om ```ts // card.component.ts @Component({ selector: "app-card", template: `

`, }) export class CardComponent {} ``` ```html

Title

Any content I want!

``` Kartica pruža stilizirani wrapper; roditelj odlučuje što ide unutar — mnogo fleksibilnije od prosljeđivanja stringova putem `@Input`. ## Projekcija s više slot-ova s select ```ts @Component({ selector: "app-panel", template: `

`, }) export class PanelComponent {} ``` ```html

My Panel

Main body content

``` Atribut `select` (CSS selektor — atribut, klasa ili tag) usmjerava svaki dio projiciranog sadržaja u ispravan `` slot, omogućujući razporede s više regija. ## Projektirani sadržaj zadržava svoj izvorni kontekst ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## Zašto je to važno Projekcija sadržaja je ključ za izgradnju **ponovno iskoristivih, komponibilnih** UI komponenti u Angular-u — karti, modala, taba, rasporeda, i bilo kojeg "shell-a" gdje konzument daje unutarnji sadržaj. Bez nje, komponente bi bile krute (samo konfigurabilne putem input-a); s `` (i `select` za više slot-ova), postaju fleksibilni kontejneri, što je bitno za design sustave i dijeljene biblioteke komponenti.

Projekcija s jednim slot-om

Projekcija s više slot-ova s select

Projektirani sadržaj zadržava svoj izvorni kontekst

Zašto je to važno

Povezana pitanja