@Directive vs @Component en angular

¿Cuál es la diferencia entre @Componenty @Directiveen Angular? Ambos parecen hacer la misma tarea y tienen los mismos atributos.

¿Cuáles son los casos de uso y cuándo preferir uno sobre otro?

Un @Component requiere una vista, mientras que un @Directive no.

Directivas

Comparo un @Directive con una directiva Angular 1.0 con la opciónrestrict: 'A' (Las directivas no se limitan al uso de atributos). Las directivas agregan comportamiento a un elemento DOM existente o una instancia de componente existente. Un ejemplo de caso de uso para una directiva sería registrar un clic en un elemento.

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

@Directive({
    selector: "[logOnClick]",
    hostListeners: {
        'click': 'onClick()',
    },
})
class LogOnClick {
    constructor() {}
    onClick() { console.log('Element clicked!'); }
}

Que se usaría así:

<button logOnClick>I log when clicked!</button>

Componentes

Un componente, en lugar de agregar / modificar el comportamiento, en realidad crea su propia vista (jerarquía de elementos DOM) con comportamiento adjunto. Un ejemplo de caso de uso para esto podría ser un componente de la tarjeta de contacto:

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

@Component({
  selector: 'contact-card',
  template: `
    <div>
      <h1>{{name}}</h1>
      <p>{{city}}</p>
    </div>
  `
})
class ContactCard {
  @Input() name: string
  @Input() city: string
  constructor() {}
}

Que se usaría así:

<contact-card [name]="'foo'" [city]="'bar'"></contact-card>

ContactCardes un componente de interfaz de usuario reutilizable que podríamos usar en cualquier parte de nuestra aplicación, incluso dentro de otros componentes. Básicamente, constituyen los componentes básicos de la interfaz de usuario de nuestras aplicaciones.

En resumen

Escriba un componente cuando desee crear un conjunto reutilizable de elementos DOM de IU con comportamiento personalizado. Escriba una directiva cuando desee escribir un comportamiento reutilizable para complementar los elementos DOM existentes.

Fuentes:

• @ Documentación directiva
• Documentación de @Component
• Publicación de blog útil

Componentes

1. Para registrar un componente usamos @Componentla anotación de metadatos.
2. Component es una directiva que usa shadow DOM para crear un comportamiento visual encapsulado llamado componentes. Los componentes se usan generalmente para crear widgets de UI.
3. El 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 decorator o templateurl template son obligatorios en el componente.

Directiva

1. Para registrar directivas usamos @Directiveanotaciones de metadatos.
2. La directiva se utiliza para agregar comportamiento a un elemento DOM existente.
3. La directiva 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 @Componentdecorador es en realidad un @Directivedecorador extendido con características orientadas a la plantilla.

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 y atributos personalizados que agregan funcionalidad a nuestros componentes existentes.

http://learnangular2.com/components/

Pero, ¿qué directivas hacen entonces en Angular2 +?

Las directivas de atributos asocian el comportamiento a los elementos.

Hay tres tipos de directivas en Angular:

1. Componentes: directivas con una plantilla.
2. Directivas estructurales: cambie el diseño del DOM agregando y eliminando 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

Entonces, lo que sucede en Angular2 y versiones posteriores es que las Directivas son atributos que agregan funcionalidades a elementos y componentes .

Mire la muestra a continuación de Angular.io:

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

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

Entonces, lo que hace es extender sus componentes y elementos HTML al agregar un fondo amarillo y puede usarlo 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 puedes usarlo de la siguiente manera:

<my-component></my-component>

Cuando usamos la etiqueta en el HTML, se creará este componente y se llamará y se representará al constructor.

Detección de cambio

Solo @Componentpuede ser un nodo en el árbol de detección de cambios. Esto significa que no puede establecer ChangeDetectionStrategy.OnPushen a @Directive. A pesar de este hecho, una directiva puede tener @Inputy @Outputpropiedades y se puede inyectar y manipular los componentes del anfitrión ChangeDetectorRefde la misma. 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 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. De acuerdo con el Doc,

“Los componentes angulares son un subconjunto de directivas. A diferencia de las directivas, los componentes siempre tienen una plantilla y solo se puede instanciar un componente por elemento en una plantilla ".

Angular 2 Components es una implementación del concepto de componente web . Web Components consta de varias tecnologías separadas. Puede pensar en Web Components como widgets de interfaz de usuario reutilizables que se crean con tecnología web abierta.

• Entonces, en directivas sumarias El mecanismo por el cual asociamos el comportamiento a elementos en el DOM, que consiste en tipos Estructurales, Atributos y Componentes.
• Los componentes son el tipo específico de directiva que nos permite utilizar la funcionalidad de componentes web AKA reutilización: elementos encapsulados y reutilizables disponibles en toda nuestra aplicación.

Si refieres los documentos angulares oficiales

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

Hay tres tipos de directivas en Angular:

1. Componentes: directivas con una plantilla.
2. Directivas estructurales: cambie el diseño del DOM agregando y eliminando elementos DOM. por ejemplo * ngIf
3. Directivas de atributo: cambie la apariencia o el comportamiento de un elemento, componente u otra directiva. por ejemplo [ngClass].

A medida que la Aplicación crece, encontramos dificultades para mantener todos estos códigos. Para fines de reutilización, separamos nuestra lógica en componentes inteligentes y componentes tontos y utilizamos directivas (estructurales o de atributos) para realizar cambios en el DOM.

Componentes

Los componentes son el bloque de construcción de interfaz de usuario más básico de una aplicación angular. Una aplicación angular contiene un árbol de componentes angulares. Nuestra aplicación en Angular se basa en un árbol de componentes . Cada componente debe tener su plantilla, estilo, ciclo de vida, selector, etc. Por lo tanto, cada componente tiene su estructura . Puede tratarlos como una pequeña aplicación web independiente con plantilla y lógica propias y la posibilidad de comunicarse y usarse junto con otros componentes.

Archivo .ts de muestra para Componente:

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

@Component({
    // component attributes
    selector: 'app-training',
    templateUrl: './app-training.component.html',
    styleUrls: ['./app-training.component.less']
})

export class AppTrainingComponent {
    title = 'my-app-training';
}

y su vista de plantilla ./app.component.html:

Hello {{title}}

Luego puede representar la plantilla AppTrainingComponent con su lógica en otros componentes (después de agregarla al módulo)

<div>
   <app-training></app-training>
</div>

y el resultado será

<div>
   my-app-training
</div>

como AppTrainingComponent se procesó aquí

Ver más sobre componentes

Directivas

La directiva cambia la apariencia o el comportamiento de un elemento DOM existente. Por ejemplo [ngStyle] es una directiva. Las directivas pueden extender componentes (pueden usarse dentro de ellos) pero no compilan una aplicación completa . Digamos que solo admiten componentes. No tienen su propia plantilla (pero, por supuesto, puede manipular la plantilla con ellas).

Directiva de muestra:

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) { }

  @Input('appHighlight') highlightColor: string;

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || 'red');
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

Y su uso:

<p [appHighlight]="color" [otherPar]="someValue">Highlight me!</p>

Ver más sobre directivas