Проекция в несколько слотов с select
Проецируйте содержимое в именованные слоты
«Проекция в несколько слотов с select» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Несколько слотов
Многим компонентам нужны несколько областей: заголовок, основное содержимое и нижний колонтитул. Angular поддерживает это с помощью многослотовой проекции и атрибута select у <ng-content>.
Атрибут select
Атрибут select принимает селектор CSS. Каждый <ng-content select="..."> проецирует только узлы, соответствующие этому селектору.
<ng-content select="[card-header]"></ng-content>
<ng-content select="[card-body]"></ng-content>Выбор по атрибуту
Селекторы атрибутов используются чаще всего, поскольку в разметке компонента-потребителя они выглядят понятно.
@Component({
selector: 'app-card',
template:
'<header><ng-content select="[header]"></ng-content></header>' +
'<main><ng-content select="[body]"></ng-content></main>'
})
export class CardComponent {}Использование именованных слотов
Компонент-потребитель помечает каждую часть содержимого соответствующим атрибутом.
<app-card>
<h2 header>Title</h2>
<p body>Some body text here.</p>
</app-card>Выбор по элементу или классу
Также можно выбирать по имени элемента или классу CSS.
<ng-content select="card-title"></ng-content>
<ng-content select=".highlight"></ng-content>Универсальный слот
<ng-content> без атрибута select захватывает всё, что не подошло именованному слоту. Размещайте его последним в качестве резервного варианта.
<ng-content select="[header]"></ng-content>
<ng-content></ng-content>Порядок имеет значение
Angular проверяет слоты в порядке их расположения в шаблоне. Каждый спроецированный узел попадает в первый подходящий слот. Размещайте универсальный слот после конкретных селекторов, чтобы он не поглощал всё содержимое.
Объединение селекторов
Селекторы CSS можно объединять, например select="button[primary]" выбирает элемент-кнопку с атрибутом primary.
<ng-content select="button[primary]"></ng-content>Компонент разметки
Ниже приведена карточка со слотами для заголовка, основного содержимого и нижнего колонтитула, а также с универсальным слотом.
@Component({
selector: 'app-card',
template:
'<header><ng-content select="[header]"></ng-content></header>' +
'<section><ng-content></ng-content></section>' +
'<footer><ng-content select="[footer]"></ng-content></footer>'
})
export class CardComponent {}Каждый узел проецируется один раз
Каждый спроецированный узел соответствует только одному слоту и отображается ровно один раз. Проекция не позволяет клонировать один и тот же узел в два слота.
Стилизация отдельных слотов
Поскольку каждый слот находится в отдельной области DOM, слоты можно обернуть в стилизованные контейнеры (для заголовка и нижнего колонтитула), чтобы придать каждой области собственный вид.
Быстрая проверка
Проверьте свои знания о многослотовой проекции.
Итоги
Вы научились создавать многослотовые компоненты с помощью <ng-content select="...">. Селекторы могут выбирать атрибуты, элементы или классы; слот без селектора является универсальным, а порядок определяет, какой слот будет выбран.
Часто задаваемые вопросы
Урок «Проекция в несколько слотов с select» бесплатный?
Да — полный текст урока «Проекция в несколько слотов с select» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Проекция в несколько слотов с select»?
Проецируйте содержимое в именованные слоты Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Проекция в несколько слотов с select»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Проекция содержимого в один слот
- Проекция в несколько слотов с select
- ng-template и ng-container
- TemplateRef и ViewContainerRef