Τι είναι η προβολή περιεχομένου με ng-content;

Question

Accepted Answer

**Η προβολή περιεχομένου** επιτρέπει σε ένα εξάρτημα να δεχτεί και να απόδώσει **σήμανση που μεταφέρεται από τον γονέα του** — τοποθετημένη μέσω ``. Είναι ο τρόπος για να δημιουργήσετε ευέλικτα, επαναχρησιμοποιήσιμα εξαρτήματα wrapper (κάρτες, διαλόγους, διατάξεις) των οποίων ο εσωτερικός περιεχόμενο ελέγχεται από τον καταναλωτή. (Είναι το ισοδύναμο του Angular των slots Vue/web-component και του React `children`.) ## Προβολή ενός ενός slot ```ts // card.component.ts @Component({ selector: "app-card", template: `

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

Title

Any content I want!

``` Η κάρτα παρέχει το styled wrapper. ο γονέας αποφασίζει τι θα μπει στο εσωτερικό — πολύ πιο ευέλικτο από το πέρασμα συμβολοσειρών μέσω `@Input`. ## Προβολή πολλαπλών slot με select ```ts @Component({ selector: "app-panel", template: `

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

My Panel

Main body content

``` Το χαρακτηριστικό `select` (ένας επιλογέας CSS — χαρακτηριστικό, κλάση ή ετικέτα) δρομολογεί κάθε κομμάτι του προβαλλόμενου περιεχομένου στο σωστό slot ``, ενεργοποιώντας διατάξεις πολλαπλών περιοχών. ## Το προβαλλόμενο περιεχόμενο διατηρεί το αρχικό του πλαίσιο ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## Γιατί είναι σημαντικό Η προβολή περιεχομένου είναι το κλειδί για τη δημιουργία **επαναχρησιμοποιήσιμων, συνθέσιμων** εξαρτημάτων UI στο Angular — κάρτες, modals, καρτέλες, διατάξεις και οποιοδήποτε "shell" όπου ο καταναλωτής παρέχει το εσωτερικό περιεχόμενο. Χωρίς αυτό, τα εξαρτήματα θα ήταν άκαμπτα (μόνο με ρύθμιση μέσω inputs). με `` (και `select` για πολλαπλά slots), γίνονται ευέλικτα δοχεία, που είναι απαραίτητα για συστήματα σχεδιασμού και κοινές βιβλιοθήκες εξαρτημάτων.