Условные операторы *ngIf и else if в Angular 4

Быстрый ответ

В Angular для реализации логики, аналогичной "else if", можно использовать *ngIf в связке с блоками else, которые ссылаются на шаблоны:

<ng-container *ngIf="condition1; else condition2Ref">
  <!-- Если condition1 выполняется... -->
</ng-container>

<ng-template #condition2Ref>
  <ng-container *ngIf="condition2; else condition3Ref">
    <!-- Иначе работаем с condition2 -->
  </ng-container>
</ng-template>

<ng-template #condition3Ref>
  <!-- Или обрабатываем condition3 -->
</ng-template>

Определите переменные #condition2Ref и #condition3Ref в <ng-template> и применяйте <ng-container> для проверки условий, чтобы последовательно управлять отображением содержимого.

Особенности и понимание вложенности ngIf

Условный рендеринг в Angular похож на сценарий сложного научно-фантастического фильма: важно умело управлять множеством условий, не теряя нить сюжета. Здесь *ngIf, else, <ng-container> и <ng-template> становятся незаменимыми помощниками, позволяя сохранить логику отображения в управляемом состоянии.

Тернарный оператор: решение для простых задач

Тернарный оператор – это компактное и быстрое решение, которое можно применить для простых условных изменений в шаблоне:

<div>
  {{ condition1 ? 'Condition1 в приоритете' : (condition2 ? 'Condition2 активирован' : 'Выполняется condition3') }}
</div>

Такой код остается наглядным, однако при усложнении условий его читаемость может снижаться.

Подробнее об этом расскажет наш спикер на видео

Моделирование else-if: приведение к желаемому поведению

Angular не предоставляет встроенного else-if, но это не является проблемой. Мы можем моделировать необходимое поведение, используя вложенность *ngIf. Структура <ng-container> подойдет в случаях, когда требуется невидимая обертка с минимумом размещаемых в DOM элементов.

Использование ngSwitch при наборе нескольких вариантов

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

<ng-container [ngSwitch]="conditionValue">
  <div *ngSwitchCase="'first'">Случай первый: Вулкан</div>
  <div *ngSwitchCase="'second'">Случай второй: Федерация</div>
  <div *ngSwitchDefault>Ситуация неопределена: Оставайтесь внимательными!</div>
</ng-container>

Визуализация

В примере ниже показана структура *ngIf с else if с использованием аналогий из версий "Звездных войн":

Силы в космосе 🔭: | Вулкан | Федерация | Ситхи | Дроиды |

Ответы Angular:
*ngIf="на Вулкане"     => 🖖 **Действуйте логично!**
*ngIf="в Федерации"; else SithCheck => 👨‍✈️ **Фазеры задействованы!**
<ng-template #SithCheck>
  *ngIf="среди Ситхов"; else DroidWarning => 👽 **Тревога! Будьте готовы к бою!**
  <ng-template #DroidWarning>
     🐭 **Обнаружена чрезмерная чувствительность! Будьте на страже!**
  </ng-template>
</ng-template>

Это визуальное представление поможет лучше понять, как Angular решает, какие элементы должны быть отображены в зависимости от выполняемых условий.

Гибкость управления с помощью ngTemplateOutlet

Angular предоставляет ngTemplateOutlet для управления шаблонами с наибольшей гибкостью. Вы определяете шаблон один раз, а затем используете его снова под разными условиями:

<ng-container *ngTemplateOutlet="condition1 ? template1 : condition2 ? template2 : template3"></ng-container>

<ng-template #template1>События на Вулкане...</ng-template>
<ng-template #template2>Тест Кобаяши Мару...</ng-template>
<ng-template #template3>Тревога! Срочное вмешательство требуется!</ng-template>

Такой подход повышает возможность повторного использования кода и помогает поддерживать аккуратность кодовой базы вашего проекта.

Выбор стратегии: критерии для применения

При работе со условным рендерингом в Angular следует учитывать:

1. Производительность: *ngIf с else не влияет на скорость выполнения.
2. Читаемость: Сложные вложенные структуры могут затруднить понимание кода.
3. Сопровождаемость: Применение ngTemplateOutlet упрощает повторное использование шаблонов.
4. Сложность: Для реализации простых сценариев подойдут тернарные операторы.

Наилучший выбор зависит от целей и контекста задачи.

Полезные материалы

1. Официальная документация Angular – ngIf — ваши гид по миру Angular.
2. Обсуждение на Stackoverflow о ngIf-else — обмен опытом и знаниями по теме *ngIf else.
3. Статья Нетанела Басала о ngIf — практические рекомендации и тактики использования.
4. Подробное руководство по ngIf в Angular — ваш путеводитель по миру ngIf, else и then.
5. Руководство Codecraft.tv по директивам Angular – ngIf — схемы применения NgIf для лучшего понимания.
6. Учебное видео на YouTube о ngIf Else в Angular — знакомство с практическим применением на примерах.