@Directive v / s @Component in Angular

Компоненты

1. Для регистрации компонента мы используем @Component метаданных @Component.
2. Компонент - это директива, которая использует теневой DOM для создания инкапсулированного визуального поведения, называемого компонентами. Компоненты обычно используются для создания виджетов пользовательского интерфейса.
3. Компонент используется, чтобы разбить приложение на более мелкие компоненты.
4. Только один компонент может присутствовать на элемент DOM.
5. @View декоратор или шаблон шаблона являются обязательными в компоненте.

директива

1. Для регистрации директив мы используем @Directive метаданных @Directive.
2. Директива используется для добавления поведения в существующий элемент DOM.
3. Директива - это использование для разработки повторно используемых компонентов.
4. Многие директивы могут быть использованы для каждого элемента DOM.
5. Директива не использует вид.

Источники:

http://www.codeandyou.com/2016/01/difference-between-component-and-directive-in-Angular2.html

Компонент является директивой-с-шаблоном, а декоратор @Component на самом деле является декоратором @Directive, расширенным с использованием шаблонов.

В Angular 2 и выше "все является компонентом". Компоненты - это основной способ создания и определения элементов и логики на странице с помощью как пользовательских элементов, так и атрибутов, которые добавляют функциональность нашим существующим компонентам.

http://learnangular2.com/components/

Но что тогда делают директивы в Angular2+?

Директивы атрибутов прикрепляют поведение к элементам.

В Angular существует три вида директив:

1. Компоненты - директивы с шаблоном.
2. Структурные директивы - измените макет DOM, добавляя и удаляя элементы DOM.
3. Директивы атрибутов - изменяют внешний вид или поведение элемента, компонента или другой директивы.

https://angular.io/docs/ts/latest/guide/attribute-directives.html

То, что происходит в Angular2 и выше, это Директивы, это атрибуты, которые добавляют функциональность элементам и компонентам.

Посмотрите на образец ниже от Angular.io:

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

Итак, что он делает, он расширяет ваши компоненты и элементы HTML с добавлением желтого фона, и вы можете использовать его, как показано ниже:

<p myHighlight>Highlight me!</p>

Но компоненты будут создавать полные элементы со всеми функциями, как показано ниже:

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  template: '
    <div>Hello my name is {{name}}. 
      <button (click)="sayMyName()">Say my name</button>
    </div>
   '
})
export class MyComponent {
  name: string;
  constructor() {
    this.name = 'Alireza'
  }
  sayMyName() {
    console.log('My name is', this.name)
  }
}

и вы можете использовать его, как показано ниже:

<my-component></my-component>

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

Обнаружение изменений

Только @Component может быть узлом в дереве обнаружения изменений. Это означает, что вы не можете установить ChangeDetectionStrategy.OnPush в @Directive. Несмотря на это, директива может иметь свойства @Input и @Input и из @Output вы можете внедрять и манипулировать хост-компонентом ChangeDetectorRef. Поэтому используйте Компоненты, когда вам нужен детальный контроль над деревом обнаружения изменений.

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

"Директивы позволяют вам привязывать поведение к элементам в DOM".

Директивы делятся на 3 категории:

• атрибут
• структурная
• Составная часть

Да, в Angular 2 Компоненты являются типом директивы. Согласно Доку,

"Угловые компоненты - это подмножество директив. В отличие от директив, компоненты всегда имеют шаблон, и для каждого элемента в шаблоне может быть создан только один компонент".

Angular 2 Components - это реализация концепции веб-компонентов. Веб-компоненты состоят из нескольких отдельных технологий. Вы можете думать о веб-компонентах как о многократно используемых виджетах пользовательского интерфейса, которые создаются с использованием открытой веб-технологии.

• Итак, в сводных директивах Механизм, с помощью которого мы прикрепляем поведение к элементам в DOM, состоящим из типов Structural, Attribute и Component.
• Компоненты - это особый тип директивы, который позволяет нам использовать функциональность веб-компонента AKA для повторного использования - инкапсулированные, повторно используемые элементы, доступные в нашем приложении.

Если вы ссылаетесь на официальные угловые документы

https://angular.io/guide/attribute-directives

В Angular существует три вида директив:

1. Компоненты - директивы с шаблоном.
2. Структурные директивы - измените макет DOM, добавляя и удаляя элементы DOM. напр. * ngIf
3. Директивы атрибутов - изменяют внешний вид или поведение элемента, компонента или другой директивы. например, [ngClass].

По мере роста Приложения мы испытываем трудности в поддержании всех этих кодов. В целях повторного использования мы разделяем нашу логику на интеллектуальные компоненты и немые компоненты и используем директивы (структурные или атрибутные) для внесения изменений в DOM.