Kas yra turinio projekcija su ng-content?

Question

Accepted Answer

**Turinio projekcija** leidžia komponentui priimti ir atvaizduoti **žymę, pasiųstą iš jo tėvinio elemento** — sutvarkytą per ``. Tai yra būdas kurti lanksčius, pakartotinai naudojamus wrapper komponentus (korteles, dialogo langus, išdėstymus), kurių vidinį turinį kontroliuoja vartotojas. (Tai Angular ekvivalentas Vue/web-komponento lizdams ir React `children`.) ## Vieno lizdo projekcija ```ts // card.component.ts @Component({ selector: "app-card", template: `

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

Title

Any content I want!

``` Kortelė pateikia stilizuotą wrapper; tėvinis elementas nusprendžia, kas eis viduje — daug lankstesnė nei įvesties string-ų perdavimas per `@Input`. ## Kelių lizdų projekcija su select ```ts @Component({ selector: "app-panel", template: `

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

My Panel

Main body content

``` Savybė `select` (CSS selektorius — atributas, klasė arba žymė) nukreipia kiekvieną projektinto turinio dalį į tinkamą `` lizdą, suteikdama daugiaregionį išdėstymą. ## Projekcinis turinys išsaugo savo pradinį kontekstą ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## Kodėl tai svarbu Turinio projekcija yra raktas kurti **pakartotinai naudojamus, kompozicinius** UI komponentus Angular sistemoje — korteles, modalus, skirtukus, išdėstymus ir bet kurią "apvalkalą", kur vartotojas pateikia vidinį turinį. Be jos komponentai būtų standartiniai (konfigūruojami tik per įvestis); su `` (ir `select` keliems lizdams) jie tampa lankstūs konteineriais, kurie yra būtini dizaino sistemoms ir bendrinomosioms komponentų bibliotekoms.