@ Directiva v /s @ Componente en Angular

Componentes

1. Para registrar un componente usamos @Component una anotación de meta-datos.
2. Component es una directiva que usa shadow DOM para crear un comportamiento visual encapsulado llamado components. Los componentes se suelen utilizar para crear widgets de interfaz de usuario.
3. Componente se utiliza para dividir la aplicación en componentes más pequeños.
4. Solo un componente puede estar presente por elemento DOM.
5. @View la plantilla decorator o templateurl son obligatorias en componente.

Directiva

1. Para registrar directivas usamos @Directive la anotación de meta-datos.
La directiva
2. se usa para agregar comportamiento a un elemento DOM existente.
La Directiva
3. se utiliza para diseñar componentes reutilizables.
4. Se pueden usar muchas directivas por elemento DOM.
5. La directiva no usa View.

Fuentes:

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

Un componente es una directiva-con-una-plantilla y el decorador @Component es en realidad un decorador @Directive extendido con características orientadas a plantillas.

En Angular 2 y superior, " todo es un componente."Los componentes son la forma principal en que construimos y especificamos elementos y lógica en la página, a través de elementos personalizados y atributos que agregan funcionalidad a nuestros componentes existentes.

Http://learnangular2.com/components /

Pero ¿qué directivas hacen entonces en Angular2+ ?

Las directivas de atributos adjuntan comportamiento a los elementos.

Hay tres tipos de directivas en Angular:

1. Componentes-directivas con una plantilla.
2. Directivas estructurales-cambio el diseño DOM mediante la adición y eliminación de elementos DOM.
3. Directivas de atributos-cambian la apariencia o el comportamiento de un elemento, componente, u otra directiva.

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

Así que lo que está sucediendo en Angular2 y arriba es Las directivas son atributos que agregan funcionalidades de elementos y componentes.

Mira la siguiente muestra de Angular.io:

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

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

Así que lo que hace, se extiende componentes y elementos HTML con la adición de fondo amarillo y se puede utilizar de la siguiente manera:

<p myHighlight>Highlight me!</p>

Pero los componentes crearán elementos completos con todas las funcionalidades como a continuación:

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)
  }
}

Y puede usarlo de la siguiente manera:

<my-component></my-component>

Cuando usamos la etiqueta en el HTML, este componente se creará y el constructor get called and rendered.

Detección de cambios

Solo @Component puede ser un nodo en el árbol de detección de cambios. Esto significa que no se puede establecer ChangeDetectionStrategy.OnPush en un @Directive. A pesar de este hecho, una Directiva puede tener propiedades @Input y @Output y puede inyectar y manipular ChangeDetectorRef del componente host desde ella. Por lo tanto, use Componentes cuando necesite un control granular sobre su árbol de detección de cambios.

En un contexto de programación, las directivas proporcionan orientación al compilador para alterar cómo de otra manera procesaría la entrada, es decir, cambiar algún comportamiento.

"Las directivas le permiten adjuntar comportamiento a elementos en el DOM."

Las directivas se dividen en 3 categorías:

• Atributo
• Estructural
• Componente

Sí, en Angular 2, los componentes son un tipo de Directiva. Según el Doc,

" Angular los componentes son un subconjunto de directivas. A diferencia de las directivas, los componentes siempre tienen una plantilla y solo se puede crear una instancia de un componente por elemento en una plantilla."

Los componentes de Angular 2 son una implementación del concepto de Componente Web . Web Components consta de varias tecnologías separadas. Puede pensar en los componentes Web como widgets de interfaz de usuario reutilizables que se crean utilizando tecnología Web abierta.

• Así que en resumen las directivas Del mecanismo por que adjuntamos comportamiento a los elementos en el DOM, que consiste en Estructural, Tipos de atributos y componentes.
• Los componentes son el tipo específico de directiva que nos permite utilizar funcionalidad del componente web TAMBIÉN conocida como reusabilidad - elementos encapsulados y reutilizables disponibles en toda nuestra aplicación.