ng-content સાથે કન્ટેન્ટ પ્રોજેક્શન શું છે?

Question

Accepted Answer

**કન્ટેન્ટ પ્રોજેક્શન** એક કમ્પોનેન્ટને તેના **પિતૃ દ્વારા પસાર કરવામાં આવેલ માર્કআપ સ્વીકૃતિ અને રેન્ડર કરવા દે છે** — `` દ્વારા સ્થાપિત. તે કેવી રીતે તમે લવચીક, પુનઃવપરાશ યોગ્ય રેપર કમ્પોનેન્ટ્સ (કાર્ડ, સંવાદ, લેઆઉટ) બનાવો છો જેમાં ગ્રાહક આંતરિક સામગ્રીને નિયંત્રણ કરે છે. (તે Vue/વેબ-કમ્પોનેન્ટ સ્લોટ્સ અને React ની `children` ની Angular ની સમકક્ષ છે.) ## સિંગલ-સ્લોટ પ્રોજેક્શન ```ts // card.component.ts @Component({ selector: "app-card", template: `

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

Title

Any content I want!

``` કાર્ડ સ્ટાઇલ્ડ રેપર પ્રદાન કરે છે; પિતૃ તે નક્કી કરે છે કે અંદર શું જાય છે — `@Input` દ્વારા સ્ટ્રિંગ્સ પાસ કરવા કરતાં ઘણું વધુ લવચીક. ## મલ્ટિ-સ્લોટ પ્રોજેક્શન select સાથે ```ts @Component({ selector: "app-panel", template: `

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

My Panel

Main body content

``` `select` વિશેષતા (CSS સિલેક્ટર — વિશેષતા, વર્ગ, અથવા ટૅગ) પ્રત્યેક પ્રોજેક્ટેડ સામગ્રી નીચે સાચો `` સ્લોટ માર્ગ દર્શાવે છે, મલ્ટિ-રિજીયન લેઆઉટ સક્ષમ કરીને. ## પ્રોજેક્ટ કરેલી સામગ્રી તેનો મૂળ સંદર્ભ જાળવી રાખે છે ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## તે શા માટે મહત્વનું છે કન્ટેન્ટ પ્રોજેક્શન Angular માં **પુનઃવપરાશ યોગ્ય, રચનાત્મક** UI કમ્પોનેન્ટ્સ બનાવવાની કી છે — કાર્ડ, મોડલ્સ, ટૅબ્સ, લેઆઉટ્સ, અને કોઈ પણ "શેલ" જ્યાં ગ્રાહક આંતરિક સામગ્રી પ્રદાન કરે છે. તેના વગર, કમ્પોનેન્ટ્સ કઠોર હોત (ફક્ત inputs દ્વારા રૂપરેખાંકિત); `` સાથે (અને બહુવિધ સ્લોટ્સ માટે `select`), તેઓ લવચીક કન્ટેનર્સ બને છે, જે ડિઝાઇન સિસ્ટમ્સ અને શેર કરેલા કમ્પોનેન્ટ લાઇબ્રેરીઓ માટે આવશ્યક છે.