Что такое проекция содержимого с помощью ng-content?

Question

Accepted Answer

**Проекция содержимого** позволяет компоненту принимать и отображать **разметку, переданную его родительским компонентом** — размещённую через ``. Это способ создания гибких, многократно используемых компонентов-обёрток (карточки, диалоги, макеты), чьё внутреннее содержимое контролирует потребитель. (Это эквивалент Angular слотам Vue/web-компонентов и `children` в React.) ## Single-slot projection ```ts // card.component.ts @Component({ selector: "app-card", template: `

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

Title

Any content I want!

``` Карточка предоставляет стилизованную обёртку; родительский компонент решает, что внутри неё — намного более гибко, чем передача строк через `@Input`. ## Multi-slot projection с 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. ``` ## Почему это важно Проекция содержимого — ключ к созданию **многократно используемых, компонуемых** UI-компонентов в Angular — карточек, модалей, вкладок, макетов и любых «оболочек», где потребитель предоставляет внутреннее содержимое. Без неё компоненты были бы жёсткими (настраиваемые только через inputs); с `` (и `select` для нескольких слотов) они становятся гибкими контейнерами, что критически важно для design system'ов и библиотек общих компонентов.