Angular Academy · Урок

Проекция содержимого в один слот

Проецируйте содержимое с помощью ng-content

«Проекция содержимого в один слот» — бесплатный урок Angular Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Что такое проекция содержимого

Проекция содержимого позволяет компоненту получать разметку от родительского компонента и отображать её внутри собственного шаблона. Это аналог «слотов» из веб-компонентов в Angular.

Родительский компонент размещает содержимое между тегами компонента, а компонент решает, где это содержимое появится.

Зачем это нужно

Переиспользуемые оболочки, такие как карточки, диалоговые окна и панели, заранее не знают, какое содержимое будут отображать. Проекция содержимого превращает их в гибкие контейнеры.

Создайте карточку один раз и заполняйте её чем угодно
Храните логику размещения в компоненте
Храните содержимое в компоненте-потребителе

Элемент ng-content

Элемент <ng-content> обозначает место, куда помещается спроецированное содержимое. В конфигурации с одним слотом используется ровно один <ng-content> без атрибута select.

@Component({
  selector: 'app-card',
  template: '<div class="card"><ng-content></ng-content></div>'
})
export class CardComponent {}

Использование компонента

Всё, что родительский компонент размещает между тегами компонента, проецируется в слот.

<app-card>
  <h2>Hello</h2>
  <p>This text is projected into the card.</p>
</app-card>

Один слот — один выход

При использовании одного безымянного слота все спроецированные узлы попадают в один <ng-content>. Фильтрация не выполняется, а порядок в точности сохраняется таким, каким его задал родительский компонент.

Содержимое по умолчанию

Внутри <ng-content> можно разместить резервную разметку. Современный Angular отображает это содержимое по умолчанию только тогда, когда компонент-потребитель ничего не проецирует в данный слот.

<div class="card">
  <ng-content>No content provided.</ng-content>
</div>

Стилизация спроецированного содержимого

Спроецированное содержимое принадлежит представлению родительского компонента, поэтому оно оформляется стилями родителя, а не карточки. Чтобы обратиться к спроецированным узлам из карточки, используйте ::ng-deep умеренно или полагайтесь на глобальные стили.

Содержимое и представление

Angular различает дочерние элементы содержимого (спроецированные внутрь) и дочерние элементы представления (объявленные в шаблоне). Это важно для запросов вроде contentChild и viewChild.

icon = contentChild(IconComponent);

Жизненный цикл: ngAfterContentInit

Спроецированное содержимое становится доступным после выполнения ngAfterContentInit(). Используйте этот метод (или ngAfterContentChecked), чтобы безопасно читать дочерние элементы содержимого.

ngAfterContentInit() {
  console.log('Projected content ready');
}

Практический пример панели

Ниже приведена полностью переиспользуемая панель. Компонент-потребитель полностью управляет внутренним содержимым, а панель — оболочкой.

@Component({
  selector: 'app-panel',
  template: '<section class="panel"><ng-content></ng-content></section>',
  styles: ['.panel { border: 1px solid #ccc; padding: 16px; }']
})
export class PanelComponent {}

Распространённая ошибка

Размещение одного и того же безымянного <ng-content> дважды не дублирует содержимое. Angular проецирует его только в последний подходящий слот. Если Вам нужно несколько областей, используйте многослотовую проекцию.

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете проекцию с одним слотом.

Итоги

Вы узнали, что проекция содержимого использует <ng-content> для отображения разметки, переданной родительским компонентом, внутри компонента. При проекции с одним слотом используется один безымянный выход, спроецированное содержимое принадлежит представлению родителя и становится доступным в ngAfterContentInit.

Часто задаваемые вопросы

Урок «Проекция содержимого в один слот» бесплатный?

Да — полный текст урока «Проекция содержимого в один слот» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Проекция содержимого в один слот»?

Проецируйте содержимое с помощью ng-content Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Проекция содержимого в один слот»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy