Управление потоком в компонентах - @if

Определение того, что отобразить на экране пользователю — распространенная задача при разработке приложений. Зачастую это решение принимается программно с использованием условий.

Для реализации условного отображения в шаблонах Angular использует синтаксис @if.

В этом уроке вы научитесь использовать условные конструкции в шаблонах.

Синтаксис, обеспечивающий условное отображение элементов в шаблоне — это @if.

Вот пример использования синтаксиса @if в компоненте:

@Component({
  ...
  template: `
    @if (isLoggedIn) {
      <p>Welcome back, Friend!</p>
    }
  `,
})
export class App {
  isLoggedIn = true;
}

Обратите внимание на два момента:

• Префикс @ перед if используется потому, что это особый тип синтаксиса, называемый синтаксисом шаблонов Angular.
• Для приложений версии v16 и старше, пожалуйста, обратитесь к документации Angular по NgIf для получения дополнительной информации.

1. Create a property called isServerRunning

   В классе App добавьте boolean свойство с именем isServerRunning и установите начальное значение true.

2. Use @if in the template

   Обновите шаблон, чтобы отобразить сообщение Yes, the server is running, если значение isServerRunning равно true.

3. Use @else in the template

   Теперь Angular поддерживает нативный синтаксис шаблонов для определения случая "иначе" (else) с помощью синтаксиса @else. Обновите шаблон, чтобы отобразить сообщение No, the server is not running в случае выполнения условия @else.

   Вот пример:

   template: `
     @if (isServerRunning) { ... }
     @else { ... }
   `;

   Добавьте свой код, чтобы заполнить недостающую разметку.

Этот тип функциональности называется условным управлением потоком. Далее вы узнаете, как выводить повторяющиеся элементы в шаблоне.