31
Июл
2019

Директивы

Angular директивы используются для изменения внешнего вида или поведения DOM-элемента. Выделяют три типа директив:

  • С собственным шаблоном, или по-другому компоненты (компоненты являются директивами);
  • Структурные, которые изменяют структуру DOM-дерева;
  • Атрибуты, которые изменяют внешний вид или поведение по умолчанию элемента DOM-дерева.

Компоненты уже были разобраны ранее, поэтому в этой и следующей главах будут рассмотрены только структурные директивы и директивы атрибуты.

Несмотря на существующую классификацию, иногда бывают трудно однозначно определить принадлежность к группе, поскольку одна директива может совмещать в себе функционал сразу двух групп.

По умолчанию в Angular предусмотрен ряд встроенных директив. Рассмотрим самые популярные из них.

К встроенным структурным директивам относятся: *ngIf, *ngFor, *ngSwitch и др. Все Angular директивы этой группы предваряются символом *.

*ngIf

*ngIf добавляет или удаляет элемент из DOM-дерева в зависимости от истинности переданного выражения (true – добавление, false – удаление).(untitled)


    <div *ngIf="true">This will be added to the DOM</div>

    <div *ngIf="false">This will be removed from the DOM</div>
    

*ngFor

*ngFor используется для визуализации массива данных. Директива применяется к блоку HTML-кода, определяющего, как должны отображаться данные элемента массива. Далее Angular использует этот HTML как шаблон для всех последующих элементов в массиве.

Предположим, имеется следующий массив данных:(untitled)


    cars: any[] = [
     {name: 'Audi', year: 2018},
     {name: 'BMW', year: 2015},
     {name: 'Mercedes', year: 2016}
    ];
    

Отображение списка в шаблоне выглядит так:(untitled)


    <ul>
     <li *ngFor="let car of cars; let i = index">
       {{i + 1}}. {{car.name}}, {{car.year}}
     </li>
    </ul>
    

В результате будет сгенерирован следующий HTML-код:(untitled)


    <ul>
     <li>1. Audi, 2018</li>
     <li>2. BMW, 2015</li>
     <li>3. Mercedes, 2016</li>
    </ul>
    

Angular *ngFor поддерживает ряд шаблонных переменных:

  • index – хранит порядковый номер текущего элемента массива, отсчет начинается с 0;
  • first – true, если элемент первый в массиве;
  • last – true, если элемент последний в массиве;
  • even – true, если элемент четный;
  • odd – true, если элемент нечетный.

Если HTML-шаблон элемента массива состоит из двух DOM-элементов, находящихся на одном уровне иерархии, необходимо использовать элемент <ng-container></ng-container>, который позволяет группировать элементы. При этом сам он из шаблона будет удален.(untitled)


    <ng-container *ngFor="let car of cars">
     <p [textContent]="car.name"></p>
     <p [textContent]="car.year"></p>
    </ng-container>
    

ngSwitch

ngSwitch эмулирует работу оператора switch применительно к шаблонам.(untitled)


    car: string = 'Audi';
    

(untitled)


    <div [ngSwitch]="car">
     <p *ngSwitchCase="'Audi'">This is Audi</p>
     <p *ngSwitchCase="'BMW'">This is BMW</p>
     <p *ngSwitchCase="'Mercedes'">This is Mercedes</p>
    
     <p *ngSwitchDefault>Car is undefined</p>
    </div>
    

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

ngStyle и ngClass

К наиболее используемым директивам атрибутам относятся [ngStyle] и [ngClass].

[ngStyle] принимает объект, в котором ключами служат наименования CSS-свойств, а их значениями – возможные значения соответствующих CSS-свойств.(untitled)


    elementStyles: any = {
      color: 'red', 
      opacity: 0.5
    };
    

(untitled)


    <div [ngStyle]="elementStyles">Some text</div>
    

Объект стилей можно определить прямо в шаблоне, причем можно использовать выражения и условия.(untitled)


    <div [ngStyle]="{color: 5 < 10 ? 'green' ? 'red' }">Some text</div>
    

[ngClass] также принимает объект, но ключами здесь служат наименования классов, а значениями – выражения типа Boolean. Если выражение истинно, класс будет добавлен к списку уже имеющихся классов.

В отличие от атрибута [attr.class], Angular директива [ngClass] не заменяет уже установленное значение.(untitled)


    <div [ngClass]="{'label': true}">Some text</div>
    

Также директива может принимать массив со списком классов, которые необходимо применить к элементу.(untitled)


    <div [ngClass]="['label', 'label-small']">Some text</div>
    
Share

Тебе может это понравится...