NgSwitch

Stable Directive

Что делает

Добавляет/удаляет поддеревья DOM, когда выражения совпадения вложенных элементов соответствуют выражению переключателя.

Как использовать

<container-element [ngSwitch]="switch_expression">
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
  <some-element *ngSwitchCase="match_expression_2">...</some-element>
  <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
  <ng-container *ngSwitchCase="match_expression_3">
    <!-- use a ng-container to group multiple root nodes -->
    <inner-element></inner-element>
    <inner-other-element></inner-other-element>
  </ng-container>
  <some-element *ngSwitchDefault>...</some-element>
</container-element>

Обзор класса

class NgSwitch {
  ngSwitch 
}

Селекторы

[ngSwitch]

Описание класса

NgSwitch отображает вложенные представления, когда значение их выражения совпадает со значением выражения переключателя.

Другими словами:

• вы определяете контейнерный элемент (в котором вы размещаете директиву с выражением переключателя на атрибуте [ngSwitch]="...")
• вы определяете внутренние представления внутри NgSwitch и помещаете атрибут *ngSwitchCase на корневые элементы представления.

Элементы внутри NgSwitch , но за пределами директивы NgSwitchCase или директивы NgSwitchDefault будут сохранены в том же месте.

Директива ngSwitchCase сообщает родительской директиве NgSwitch какое представление отображать при оценке выражения. Если выражение не найдено для представления ngSwitchCase, то отображается представление ngSwitchDefault.

Подробное описание класса

ngSwitch

экспортировано из @angular/common/index, определено в @angular/common/src/directives/ng_switch.ts