Директивы в Angular

Сентябрь 6, 2022

Главная
Алгебра
Директивы в Angular

Содержание

2. Что такое директива? Директива - это как компонент без template, т.е. какая-то логика, зашитая в атрибут
3. Какие бывают директивы? Компоненты Структурные директивы - которые изменяют dom, добавляя или удаляя какие-то элементы (ngIf,
4. Структурные директивы Помечаются звездочкой: {{hero.name}} К одному элементу можно применить только ОДНУ структурную директиву
5. Директивы атрибутов Можно добавлять несколько к элементу Заключаются в квадратные скобки Не меняют DOM
6. Примеры существующих директив {{hero.name}} [ngStyle]="{сolor: ‘white'}" [ngClass]="{online: status === ‘online'}"
7. Создание директивы @Directive({ selector: ‘[selectorName]' }) Add constructor with el: ElementRef
9. Скачать презентацию

Слайд 2

Что такое директива?
Директива - это как компонент без template, т.е. какая-то

логика, зашитая в атрибут
Директивы можно писать самому, также есть набор встроенных (ngIf, ngFor, ngStyle)

Слайд 3

Какие бывают директивы?
Компоненты
Структурные директивы - которые изменяют dom, добавляя или удаляя

какие-то элементы (ngIf, ngFor)
Директивы атрибутов - которые изменяют поведение компонента или элемента (ngStyle)

Слайд 4

Структурные директивы
Помечаются звездочкой:
{{hero.name}}

К одному элементу можно применить только ОДНУ

структурную директиву

Слайд 5

Директивы атрибутов
Можно добавлять несколько к элементу
Заключаются в квадратные скобки
Не меняют

DOM

Слайд 6

Примеры существующих директив
{{hero.name}}

[ngStyle]="{сolor: ‘white'}"
[ngClass]="{online: status === ‘online'}"

of items; let i = index”>

Слайд 7

Создание директивы
@Directive({ selector: ‘[selectorName]' })
Add constructor with el: ElementRef