Условный вывод с помощью @if
Условно отображайте содержимое с помощью @if и @else.
«Условный вывод с помощью @if» — бесплатный урок Angular Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Встроенный поток управления
Современные шаблоны Angular включают блоки встроенного потока управления, записываемые с помощью символа @. Они заменяют старые структурные директивы и не требуют импортов.
Блок if
Блок at-if условно отображает содержимое. Сначала записывается символ @, затем слово if, условие в круглых скобках и содержимое в фигурных скобках.
// template:
// @if (loggedIn) {
// <p>Welcome back!</p>
// }Замена ngIf
Он заменяет старую структурную директиву *ngIf. Новый синтаксис является частью языка шаблонов, поэтому ничего импортировать не нужно.
Чтение сигнала в условии
Условием может быть любое выражение, включая вызов сигнала.
// @if (count() > 0) {
// <p>You have items</p>
// }Блок else
Блок at-else задаёт запасное содержимое, когда условие ложно. Он сразу следует за закрывающей фигурной скобкой блока if.
// @if (user) {
// <p>Hello {{ user.name }}</p>
// } @else {
// <p>Please log in</p>
// }Цепочки else if
Можно объединять условия в цепочку с помощью at-else if, а затем добавить завершающий at-else.
// @if (score >= 90) { <p>A</p> }
// @else if (score >= 80) { <p>B</p> }
// @else { <p>C</p> }Сохранение результата условия
Блок at-if может связать результат условия с локальной переменной с помощью ключевого слова as; это полезно для сужения до значения, отличного от null.
// @if (user(); as u) {
// <p>{{ u.name }}</p>
// }Зачем нужен новый синтаксис
Встроенный поток управления более читабелен, лучше проверяется по типам и эффективнее структурных директив. Он избавляет от микросинтаксиса и звёздочки старых директив.
Контейнерный элемент не нужен
В отличие от старых подходов, блоку at-if не нужны обёрточный элемент или ng-template. Фигурные скобки сами ограничивают условное содержимое.
Вложение блоков
Блоки потока управления можно свободно вкладывать друг в друга. Блок at-if может содержать другой at-if, at-for и так далее.
Сочетание со связыванием
Внутри блока at-if можно использовать весь язык шаблонов: интерполяция, связывание свойств и связывание событий работают как обычно.
Быстрая проверка: условия
Новый синтаксис условий.
Повторение: условия
Вы изучили блок at-if для условного отображения, а также at-else и at-else if для альтернатив и ключевое слово as для сохранения результата. Он заменяет star-ngIf и не требует импорта. Далее: циклы с at-for.
Часто задаваемые вопросы
Урок «Условный вывод с помощью @if» бесплатный?
Да — полный текст урока «Условный вывод с помощью @if» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Условный вывод с помощью @if»?
Условно отображайте содержимое с помощью @if и @else. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Условный вывод с помощью @if»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Условный вывод с помощью @if
- Циклы с помощью @for
- Переключение с помощью @switch
- Отложенная загрузка с помощью @defer