რა არის content projection ng-content-ით?

Question

IT Interview Practice · Accepted Answer

**Content projection** საშუალებას აძლევს კომპონენტს მიიღოს და გადაიტანოს **მაკეტი, რომელიც მისი მშობლიდან გადაეცემა** — ``-ის მეშვეობით განთავსებული. ეს არის მოქნილი, გამოიყენებადი wrapper კომპონენტების (ბარათი, დიალოგი, განლაგება) აგების გზა, რომელიც შიდა შინაარსის პასუხისმგებელი არის მომხმარებელი. (ეს არის Angular-ის ეკვივალენტი Vue/web-component slots-ისა და React-ის `children`-ის.) ## Single-slot projection ```ts // card.component.ts @Component({ selector: "app-card", template: `

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

Title

Any content I want!

``` ბარათი უზრუნველყოფს სტილიზებულ wrapper-ს; მშობელი გადაწყვეტს, რა აღდგება შიგნით — ბევრად უფრო მოქნილი, ვიდრე strings-ის გადაცემა `@Input`-ის გეშ. ## Multi-slot projection select-ით ```ts @Component({ selector: "app-panel", template: `

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

My Panel

Main body content

``` `select` ატრიბუტი (CSS სელექტორი — ატრიბუტი, კლასი ან თეგი) მიმართავს თითოეულ projected content ნაწილს სწორ `` slot-ზე, რაც აძლევს multi-region განლაგებას. ## Projected content ინარჩუნებს თავის ორიგინალ კონტექსტს ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## რატომ არის ეს მნიშვნელოვანი Content projection არის ღია რეუსებელი, კომპოზიტული UI კომპონენტების აგებაში Angular-ში — ბარათი, მოდალი, ჩანართი, განლაგება და ნებისმიერი "shell" სადაც მომხმარებელი მიაწოდებს შიდა შინაარსს. ის გარეშე, კომპონენტები იქნებოდა ხისტი (მხოლოდ inputs-ის მეშვეობით კონფიგურირებული); ``-ით (და `select` მრავალი slot-ისთვის), ისინი ხდებიან მოქნილი კონტეინერი, რომელიც აუცილებელია დიზაინ სისტემებისა და გაზიარებული component library-სთვის.

Single-slot projection

Multi-slot projection select-ით

Projected content ინარჩუნებს თავის ორიგინალ კონტექსტს

რატომ არის ეს მნიშვნელოვანი

დაკავშირებული კითხვები