https://dokuwiki.webmastermsk.ru/ 2026-08-12T14:06:23+0000 https://dokuwiki.webmastermsk.ru/ https://dokuwiki.webmastermsk.ru/lib/tpl/dokuwiki/images/favicon.ico text/html 2023-01-12T09:18:09+0000 Anonymous (anonymous@undisclosed.example.com) https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angular2:directive:atributivnye_direktivy&rev=1673515089&do=diff Создание атрибутивных директив Атрибутивные директивы меняют поведение элемента, к которому они применяются. Например, директива ngClass позволяет установить для элемента класс text/html 2023-01-12T09:18:09+0000 Anonymous (anonymous@undisclosed.example.com) https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angular2:directive:hostlistener_i_hostbinding&rev=1673515089&do=diff HostListener и HostBinding Кроме простой установки значений атрибутивная директива может взаимодействовать с пользователем. Для этого применяется декоратор HostListener. text/html 2023-01-12T09:18:09+0000 Anonymous (anonymous@undisclosed.example.com) https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angular2:directive:ngclass&rev=1673515089&do=diff ngClass Директива ngClass позволяет определить набор классов, которые будут применяться к элементу. В качестве значения она принимает набор классов в следующем виде: text/html 2023-01-12T09:18:09+0000 Anonymous (anonymous@undisclosed.example.com) https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angular2:directive:ngfor&rev=1673515089&do=diff ngFor Директива ngFor позволяет перебрать в шаблоне элементы массива. Например: import { Component} from '@angular/core'; @Component({ selector: 'my-app', template: `<ul> <li *ngFor="let item of items">{{item}}</li> </ul>` }) export class AppComponent { items =["Tom", "Bob", "Sam", "Bill"]; } text/html 2023-01-12T09:18:09+0000 Anonymous (anonymous@undisclosed.example.com) https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angular2:directive:ngif&rev=1673515089&do=diff ngIf Директива ngIf позволяет удалить или, наоборот, добавить элемент при определенном условии. Например, определим следующий компонент: import { Component} from '@angular/core'; @Component({ selector: 'my-app', template: `<p *ngIf="condition"> Привет мир </p> <p *ngIf="!condition"> Пока мир </p> <button (click)="toggle()">Toggle</button>` }) export class AppComponent { con… text/html 2023-01-12T09:18:09+0000 Anonymous (anonymous@undisclosed.example.com) https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angular2:directive:ngstyle&rev=1673515089&do=diff ngStyle Директива ngStyle позволяет задать набор стилей, которые применяются к элементу. В качестве значения директива принимает js-объект, в котором ключи - названия свойств text/html 2023-01-12T09:18:09+0000 Anonymous (anonymous@undisclosed.example.com) https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angular2:directive:ngswitch&rev=1673515089&do=diff ngSwitch С помощью директивы ngSwitch можно встроить в шаблон конструкцию switch..case и в зависимости от ее результата выполнения выводить тот или иной блок. Например:\ text/html 2023-01-12T09:18:09+0000 Anonymous (anonymous@undisclosed.example.com) https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angular2:directive:simvol_zvezdochki&rev=1673515089&do=diff Символ звездочки и синтаксический сахар Можно заметить, что при использовании директив ngFor и ngIf перед ними ставится символ звездочка. По факту это не более чем синтаксический сахар, который упрощает применение директивы. Так, определение ngIf: