Переключение с помощью @switch
Выбирайте шаблоны с помощью @switch и @case.
«Переключение с помощью @switch» — бесплатный урок Angular Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Переключение с помощью switch
Блок at-switch выбирает одну из нескольких ветвей на основе значения, подобно оператору switch. Он используется вместе с at-case и at-default.
Базовый синтаксис switch
Запишите at-switch с выражением в круглых скобках, затем один или несколько блоков at-case, каждый с соответствующим значением.
// @switch (status) {
// @case ('loading') { <p>Loading...</p> }
// @case ('error') { <p>Error!</p> }
// @default { <p>Ready</p> }
// }Блок case
Каждый at-case принимает значение в круглых скобках. Отображается первая ветвь, значение которой строго равно выражению switch.
Блок default
Блок at-default отображается, если ни одна ветвь case не подходит. Он необязателен, но рекомендуется для полноты.
Строгое равенство
Сопоставление выполняется по строгому равенству (===). Убедитесь, что значения case имеют тот же тип, что и выражение switch.
Переключение по сигналу
Выражением switch может быть вызов сигнала, поэтому представление обновляется при изменении сигнала.
// @switch (state()) {
// @case ('on') { <p>On</p> }
// @case ('off') { <p>Off</p> }
// }Замена ngSwitch
Он заменяет прежнее сочетание директив ngSwitch, star-ngSwitchCase и star-ngSwitchDefault, используя более чистый синтаксис без импорта.
Отображается только одна ветвь
At-switch отображает ровно одну подходящую ветвь (или ветвь по умолчанию). Остальные ветви вообще отсутствуют в DOM.
Перечисления и константы
Ветви case могут сравниваться с элементами перечислений или константами, открытыми в компоненте, что повышает читаемость и безопасность типов.
Вложение внутри switch
Каждый блок case может содержать любое содержимое шаблона, включая другие блоки потока управления, такие как at-if и at-for.
Когда использовать switch
Предпочитайте at-switch длинной цепочке at-if / at-else if, когда выполняется ветвление по одному значению с несколькими отдельными вариантами.
Быстрая проверка: switch
Запасная ветвь блока switch.
Повторение: переключение
Вы изучили блок at-switch с ветвями at-case, сопоставляемыми по строгому равенству, и необязательной запасной ветвью at-default. Он заменяет ngSwitch и отображает ровно одну ветвь. Далее: отложенная загрузка с at-defer.
Часто задаваемые вопросы
Урок «Переключение с помощью @switch» бесплатный?
Да — полный текст урока «Переключение с помощью @switch» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Переключение с помощью @switch»?
Выбирайте шаблоны с помощью @switch и @case. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Переключение с помощью @switch»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Условный вывод с помощью @if
- Циклы с помощью @for
- Переключение с помощью @switch
- Отложенная загрузка с помощью @defer