@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 una @Directive no.

Directivas

Yo comparo una directiva @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 caso de uso de ejemplo 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 caso de uso de ejemplo para esto podría ser un componente de 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 UI reutilizable que podríamos usar en cualquier lugar de nuestra aplicación, incluso dentro de otros componentes. Básicamente, estos 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 la interfaz de usuario con comportamiento personalizado. Escriba una directiva cuando desee escribir un comportamiento reutilizable para complementar los elementos DOM existentes.

Fuentes:

• @Directiva documentación
• 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 utilizan normalmente para crear widgets de IU.
3. El componente se utiliza para dividir la aplicación en componentes más pequeños.
4. Solo puede haber un componente por elemento DOM.
5. @View El decorador o la plantilla templateurl son obligatorios en el componente.

Directiva

1. Para registrar directivas utilizamos @Directivela anotación 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 ampliado 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 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 adjuntan comportamiento a los elementos.

Hay tres tipos de directivas en Angular:

1. Componentes: directivas con plantilla.
2. Directivas estructurales: cambie el diseño del DOM agregando y eliminando elementos DOM.
3. Directivas de atributo: cambie 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 está sucediendo en Angular2 y superior 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, extenderá sus componentes y elementos HTML agregando 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, este componente se creará y el constructor será llamado y renderizado.

Detección de cambios

Solo @Componentpuede ser un nodo en el árbol de detección de cambios. Esto significa que no puede establecer ChangeDetectionStrategy.OnPushen un @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 brindan orientación al compilador para alterar la forma en que de otro modo 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,

“Los componentes angulares 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 . Los componentes web constan de varias tecnologías independientes. Puede pensar en los componentes web como widgets de interfaz de usuario reutilizables que se crean utilizando tecnología web abierta.

• Entonces, en resumen, directivas El mecanismo por el cual adjuntamos el comportamiento a los elementos en el DOM, que consta de tipos estructurales, de atributos y de componentes.
• Los componentes son el tipo específico de directiva que nos permite utilizar la funcionalidad del componente web, también conocida como reutilización: elementos encapsulados y reutilizables disponibles en toda nuestra aplicación.

Si consulta los documentos angulares oficiales

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

Hay tres tipos de directivas en Angular:

1. Componentes: directivas con 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 usamos directivas (estructurales o de atributo) para realizar cambios en el DOM.

Componentes

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

Archivo .ts de muestra para el 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 renderizó 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 (se pueden usar dentro de ellos) pero no crean una aplicación completa . Digamos que solo admiten componentes. No tienen su propia plantilla (pero, por supuesto, puede manipular la plantilla con ellos).

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