Mi az ng-content tartalomelvetítés?

Question

Accepted Answer

**A tartalomelvetítés** lehetővé teszi egy komponens számára, hogy **elfogadja és megjeleníti a szülő által átadott jelöléseket** — az `` segítségével elhelyezve. Ez az, ahogyan rugalmas, újrafelhasználható burkoló komponenseket (kártyák, párbeszédek, elrendezések) épít, amelyeknek a belső tartalma a fogyasztó irányítja. (Ez az Angular megfelelője a Vue/web-component slot-oknak és a React `children`-jének.) ## Egyszeres slot vetítés ```ts // card.component.ts @Component({ selector: "app-card", template: `

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

Title

Any content I want!

``` A kártya a stílusozott burkolót biztosítja; a szülő dönti el, mi kerül bele — sokkal rugalmasabb, mint a stringek `@Input` segítségével történő átadása. ## Többszörös slot vetítés select-tel ```ts @Component({ selector: "app-panel", template: `

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

My Panel

Main body content

``` A `select` atribútum (CSS szelektív — atribútum, osztály vagy tag) az egyes vetített tartalomdarabokat a megfelelő `` slot-hoz irányítja, több régióból álló elrendezéseket engedélyezve. ## A vetített tartalom megőrzi eredeti kontextusát ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## Miért fontos A tartalomelvetítés az **újrafelhasználható, komponálható** UI komponensek Angular-ban történő létrehozásának kulcsa — kártyák, modálok, fülek, elrendezések és bármely "héj", ahol a fogyasztó a belső tartalmat biztosítja. Nélküle a komponensek merevek lennének (csak input-on keresztül konfigurálhatók); az `` segítségével (és a `select` több slot-hoz), rugalmas konténerek lesznek, ami elengedhetetlen a design rendszerekhez és megosztott komponens könyvtárakhoz.