Директива @в @компонентов в угловой

компоненты

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

директива

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

источники:

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

компонент является директивой-с-шаблоном и @Component оформителя на самом деле @Directive декоратор расширен с помощью ориентированных на шаблон функций.

в угловой 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 и @Output свойства и вы можете вводить и манипулировать от него. Поэтому используйте компоненты, когда вам нужен детальный контроль над деревом обнаружения изменений.

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

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

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

• атрибут
• структурная
• компонент

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

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

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

• Итак, в сводных директивах механизм, с помощью которого мы прикрепляем поведение к элементам в DOM, состоящим из структурных, Типы атрибутов и компонентов.
• компоненты-это конкретный тип директивы, которая позволяет нам используйте веб-компонент АКА повторное использование - инкапсулированные, многоразовые элементы, доступные во всем нашем приложении.