@switch

Блок @switch создан по образцу оператора switch в JavaScript:

Синтаксис

@switch (condition) {
  @case (caseA) {
    Case A.
  }
  @case (caseB)
  @case (caseC) {
    Case B or C.
  }
  @default {
    Default case.
  }
}

Описание

Блок @switch отображает содержимое, выбранное одним из вариантов, соответствующих условному выражению. Значение условного выражения сравнивается с выражением варианта с помощью оператора ===.

Блок @default является необязательным и может быть опущен. Если ни один @case не соответствует выражению и блок @default отсутствует, ничего не отображается.

Для одного блока можно указать несколько условий, разместив подряд несколько операторов @case(...).

В @switch нет перехода к следующему варианту, поэтому вам не нужен аналог оператора break или return.

Исчерпывающая проверка типов

@switch поддерживает исчерпывающую проверку типов, позволяя Angular во время компиляции проверять, что обработаны все возможные значения объединённого типа.

Используя @default never;, вы явно указываете, что других вариантов быть не должно. Если впоследствии объединённый тип будет расширен и новый вариант не будет обработан с помощью @case, проверка типов шаблонов Angular сообщит об ошибке, помогая вам заранее обнаружить отсутствующие ветви.

@Component({
  template: `
    @switch (state) {
      @case ('loggedOut') {
        <button>Login</button>
      }

      @case ('loggedIn') {
        <p>Welcome back!</p>
      }

      @default never; // throws because `@case ('loading')` is missing
    }
  `,
})
export class AppComponent {
  state: 'loggedOut' | 'loading' | 'loggedIn' = 'loggedOut';
}

Если проверяемое выражение находится внутри объединённого типа, необходимо явно указать выражение, для которого нужно проверить полноту обработки всех вариантов.

@Component({
  template: `
    @switch (state.mode) {
      @case ('show') { {{ state.menu }}; }
      @case ('hide') {}
      @default never(state);
    }
  `,
})
export class App {
  state!: {mode: 'hide'} | {mode: 'show'; menu: number};
}