Acabo de empezar a trabajar con Angular 2.

Me preguntaba cuáles son las diferencias entre componentes y directivas en Angular 2.

Básicamente, hay tres tipos de directivas en Angular2 según la documentación.

• Componente
• Directivas estructurales
• Directivas de atributos

Componente

También es un tipo de directiva con plantilla, estilos y parte lógica, que es el tipo de directiva más famoso entre todos en Angular2. En este tipo de directiva, puede usar otras directivas, ya sean personalizadas o integradas en la @Componentanotación, como sigue:

@Component({
    selector: "my-app"
    directives: [custom_directive_here]
})

Utilice esta directiva en su opinión como:

<my-app></my-app>

Para la directiva de componentes, he encontrado el mejor tutorial aquí.

Directivas estructurales

Me gusta *ngFory *ngIf, se utiliza para cambiar el diseño DOM agregando y eliminando elementos DOM. explicado aquí

Directivas de atributos

Se utilizan para dar un comportamiento o estilo personalizado a los elementos existentes aplicando algunas funciones / lógica. Like ngStylees una directiva de atributo para dar estilo dinámicamente a los elementos. Podemos crear nuestra propia directiva y usar esto como atributo de algunos elementos predefinidos o personalizados, aquí está el ejemplo de una directiva simple:

Primero tenemos que importar la directiva de @angular/core

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

@Directive({
  selector: '[Icheck]',
})
export class RadioCheckbox {
   // custom logic here...
}

Podemos usar esto en la vista como se muestra a continuación:

<span Icheck>HEllo Directive</span>

Para obtener más información, puede leer el tutorial oficial aquí y aquí.

Los componentes tienen su propia vista (HTML y estilos). Las directivas son simplemente "comportamientos" agregados a elementos y componentes existentes.
Componentse extiende Directive.

Por eso, solo puede haber un componente en un elemento host, pero múltiples directivas.

Las directivas estructurales son directivas que se aplican a <template>elementos y se utilizan para agregar / eliminar contenido (estampar la plantilla). Las *aplicaciones de directiva in como *ngIfhacen <template>que se cree una etiqueta implícitamente.

Para completar lo dicho por Günter, podemos distinguir dos tipos de directivas:

• Los estructurales que actualizan el diseño del DOM agregando o quitando elementos. Los dos comunes son NgFory NgIf. Estos están vinculados al concepto de plantilla y deben tener el prefijo *. Consulte la sección "Plantillas y *" en este enlace para obtener más detalles: http://victorsavkin.com/post/119943127151/angular-2-template-syntax
• Los atributos que actualizan el comportamiento de la apariencia del elemento al que se adjuntan.

Espero que te ayude, Thierry

Aquí está la definición real.

• Si tiene una plantilla , es un Componente
• de lo contrario, si tiene un selector entre corchetes "[likethis]", es una directiva de atributo
• de lo contrario, es una directiva estructural .

Cualquier otra definición es incorrecta.

Resumen:

Un componente es una directiva con una vista asociada (es decir, HTML para ser renderizado). Todos los componentes son directivas, pero no todas las directivas son componentes. Hay tres tipos de directivas:

• Componente : una vista con comportamiento asociado. Este tipo de directiva en realidad agrega elementos DOM
• Directivas de atributos : se pueden adjuntar a elementos DOM (y componentes ya que son elementos DOM) para modificar la apariencia o el comportamiento de un elemento.
• Directivas estructurales : se pueden adjuntar a elementos DOM (y componentes ya que son elementos DOM) para modificar el diseño DOM. Las directivas estructurales comienzan con un * y en realidad agregan o eliminan un elemento DOM. Por ejemplo, *ngIfque puede insertar o eliminar un elemento DOM (o un componente angular que es un elemento DOM personalizado, pero sigue siendo un elemento DOM).

Ejemplo:

import { Component, HostListener, HostBinding, Directive, ElementRef } from '@angular/core';

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

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf='myBool' appHighlight>Hi there</div>
  `,
  styleUrls: ['./app.component.scss'],
})
export class AppComponent  {

  myBool:boolean = true;

}

En el ejemplo anterior podemos observar lo siguiente:

• El componente AppComponenttiene una plantilla con un <div>elemento que muestra, hola.
• La directiva de atributo HighlightDirective se encuentra en el <div>elemento. Esto significa que manipulará el comportamiento del <div>elemento. En este caso, resaltará el texto y lo volverá amarillo.
• La directiva estructural *ngIftambién se ubica en el <div>elemento y determinará si el elemento debe insertarse. El se <div>mostrará condicionalmente dependiendo de si myBoolse puede forzar la expresión true.

Angular 2 sigue el modelo de arquitectura de componentes / servicios.

Una aplicación angular 2 está hecha de componentes. Un componente es la combinación de una plantilla HTML y una clase de componente (una clase de mecanografiado) que controla una parte de la pantalla.

Como buena práctica, la clase de componente se usa para el enlace de datos a la vista respectiva. El enlace de datos bidireccional es una gran característica proporcionada por angular framework.

Los componentes se pueden reutilizar en toda la aplicación mediante el nombre de selector proporcionado.

Component también es una especie de directiva con una plantilla.

Otras dos directivas son

1. Directivas estructurales: cambie el diseño del DOM agregando y eliminando elementos DOM. Ej: NgFory NgIf.

2. Directivas de atributo: cambie la apariencia o el comportamiento de un elemento, componente u otra directiva. Ex: NgStyle

En realidad, los componentes también son directivas, pero tienen diferencias entre ellos.

Directivas de atributos :

Las directivas de atributo son clases que pueden modificar el comportamiento o la apariencia de un solo elemento. Para crear una directiva de atributo, aplique el @Directivea una clase.

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

@Directive({
     selector: "[custom-attr]", })

export class CustomAttrDirective {

   constructor(element: ElementRef) {
      element.nativeElement.classList.add("bg-success", "text-white");    
   } 
}

Agregar un archivo template.html de atributo de directiva

<tr *ngFor="let item of getProducts(); let i = index" custom-attr>
   <td>{{i + 1}}</td>
   <td>{{item.name}}</td>
</tr>

Directivas estructurales :

Las directivas estructurales cambian el diseño del documento HTML agregando y eliminando elementos, como micro-plantillas. Las directivas estructurales permiten que el contenido se agregue de forma condicional en función del resultado de una expresión como *ngIfo que el mismo contenido se repita para cada objeto en una fuente de datos como *ngFor.

Puede usar las directivas integradas para tareas comunes, pero escribir directivas estructurales personalizadas brinda la capacidad de adaptar el comportamiento a su aplicación.

<p *ngIf="true">
  Expression is true and ngIf is true.
  This paragraph is in the DOM.
</p>
<p *ngIf="false">
  Expression is false and ngIf is false.
  This paragraph is not in the DOM.
</p>

Componentes :

Los componentes son directivas que tienen sus propias plantillas, en lugar de depender del contenido proporcionado desde otro lugar. Los componentes tienen acceso a todas las funciones directivas, aún tienen un elemento de host, aún pueden definir propiedades de entrada y salida, etc., pero también definen su propio contenido.

Puede ser fácil subestimar la importancia de la plantilla, pero las directivas estructurales y de atributos tienen limitaciones. Las directivas pueden hacer un trabajo útil y poderoso, pero no tienen mucha información sobre los elementos a los que se aplican. Las directivas son más útiles cuando son herramientas de propósito general, como la ngModeldirectiva, que se puede aplicar a cualquier propiedad del modelo de datos y cualquier elemento de formulario, sin importar para qué se utilizan los datos o el elemento.

Los componentes, por el contrario, están estrechamente vinculados al contenido de sus plantillas. Los componentes proporcionan los datos y la lógica que utilizarán los enlaces de datos que se aplican a los elementos HTML en la plantilla, que proporcionan el contexto utilizado para evaluar las expresiones de enlace de datos y actúan como el pegamento entre las directivas y el resto de la aplicación. Los componentes también son una herramienta útil para permitir que los grandes proyectos de Angular se dividan en partes manejables.

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

import { Hero } from './hero';

@Component({
  selector: 'app-hero-child',
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
  `
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

de angular oficial

del libro Pro-Angular