Каковы примеры директивы атрибута

Question

Я с трудом в определении того, когда я должен

• создать директиву атрибута
• понимают, что мне нужно создать директиву атрибута
• использовать входные и выходные свойства

В чем необходимость директивы атрибута?

Я имею тенденцию включать всю логику в один компонент, я знаю ее определение, но практически, я не могу найти примеры.

Каковы наилучшие методы?

Answer 1

Директивы могут использоваться для управления элементом DOM. Это так полезно, когда вы хотите создать обычную (стороннюю) директиву, которую могут использовать другие программисты в вашей команде или мире.

В основном существует три типа директив.

1) Директива Структурный директивы
2) Атрибут
3) Директива Компонент (с шаблоном)

---

1)Структурные директивыобычно манипулирует структуру вида/шаблона. Например. *ngFor будет генерировать элемент в соответствии с вашим списком. *ngIf отобразит/скроет представление согласно пройденному значению.

---

2) Атрибут директива позволяет добавить атрибут DOM элемента, а затем вы можете сделать много вещей с этим DOM элемента.

например.

<p myColor >Color me!</p> //<<< this helps you to grab DOM element using ElementRef and then I'll color it as shown below. 

import { Directive, ElementRef, HostListener, Input } from '@angular/core'; 
@Directive({ 
    selector: '[myColor]' 
}) 
export class HighlightDirective { 
    constructor(private el: ElementRef) { 
    el.nativeElement.style.backgroundColor = 'red'; 
    } 
} 

здесь myColor это просто attribute directive, как он добавляется к элементу DOM как attribute но атрибут не принимает никакого значения пока.

Теперь давайте добавим значение атрибута myColor,

<p [myColor]="color">Highlight me!</p> 

---

@Input: Здесь мы проходим color variable(Angular2 bindings) поэтому в директиве мы должны иметь механизм, чтобы получить его. Таким образом, мы должны использовать @Input API, как мы собираемся, чтобы получить значение из родительского компонента (можно рассматривать директиву, как ребенок родителя)

---

@output: Если вы хотите директивы испускать некоторое значение, которое должно быть получено от родителей компонент, то вы должны использовать @Output API