Директивы Angular ngSwitch и ngTemplateOutlet

Mar 18, 2018

Директива ngSwitch

С помощью директивы ngSwitch можно встроить в шаблон конструкцию switch/case, которая работает аналогично нативной конструкции switch/case языка JavaScript, и в зависимости от результата сравнения выражения в ngSwitchCase с непосредственно значением директивы ngSwitch выводить тот или иной блок.

Например:

public switchVar = 12;
<div [ngSwitch]="switchVar">
    <span *ngSwitchCase="11">11</span>
    <span *ngSwitchCase="12">12</span>
    <span *ngSwitchDefault>default</span>
</div>

Выведет: 12

Директива ngTemplateOutlet

Директива ngTemplateOutlet - используется для повторения блока контента в шаблоне. Полезно, когда один и тот же контент дублируется в разных местах: предотвращает дублирование.

Повторяющемуся контенту можно передать объект контекста, который будет использоваться с привязками данных шаблона. Контекст определяет посредством let-атрибутов шаблона template, которые задают имя переменной. Для предоставления данных шаблону используется объект-карта и директива [ngTemplateOutletContext].

<!-- Определяем шаблон -->
<ng-template #testTemplate let-text="title" let-data="content">
    <h4>{{text}}</h4>
    <p>{{data}}</p>
</ng-template>


<!-- Используем -->
<ng-template [ngTemplateOutlet]="testTemplate"
        [ngTemplateOutletContext]="{title: 'Header', content: 'Hello world'}">
</ng-template>

Вывод:

Header
Hello world
Добавить комментарий