Mitä on sisällön projektio ng-content:lla?

Question

Accepted Answer

**Sisällön projektio** antaa komponentille mahdollisuuden hyväksyä ja renderöidä **sen pääkomponentin välittämät merkinnät** — sijoitettu `` -elementin kautta. Se on tapa rakentaa joustavat, uudelleenkäytettävät wrapper-komponentit (kortit, valintaikkunat, asettelut), joiden sisäisen sisällön kuluttaja hallitsee. (Se on Angularin vastaavuus Vue/web-component-sloteille ja Reactin `children` -ominaisuudelle.) ## Yhden slotin projektio ```ts // card.component.ts @Component({ selector: "app-card", template: `

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

Title

Any content I want!

``` Kortti tarjoaa tyylitellyt wrapper-komponentit; pääkomponentti päättää, mikä menee sisälle — paljon joustavampaa kuin merkkijonojen välittäminen `@Input` -ominaisuuden kautta. ## Monislotin projektio select-atribuutilla ```ts @Component({ selector: "app-panel", template: `

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

My Panel

Main body content

``` `select`-attribuutti (CSS-valitsin — attribuutti, luokka tai merkki) reitittää jokaisen projisoidun sisältöosuuden oikealle `` -slotille, mikä mahdollistaa usean alueen asettelut. ## Projisoidulla sisällöllä on säilytettävä alkuperäinen kontekstinsa ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## Miksi se on tärkeää Sisällön projektio on avain **uudelleenkäytettävien, komposioitavien** käyttöliittymäkomponenttien rakentamiseen Angularissa — kortit, modaalit, välilehdet, asettelut ja mikä tahansa "kuori", jossa kuluttaja toimittaa sisäisen sisällön. Ilman sitä komponentit olisivat jäykkiä (vain `@Input`-ominaisuuksien kautta konfiguroitavissa); `` -elementin kautta (ja `select` monille sloteille) niistä tulee joustavat säiliöt, mikä on välttämätöntä suunnittelujärjestelmille ja jaetuille komponenttikirjastoille.