¿Cuál es la diferencia entre el componente y la directiva?

Acabo de empezar a trabajar con Angular 2.

Me preguntaba ¿cuáles son las diferencias entre los componentes y las directivas en Angular 2?

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

  • Componente
  • Directivas estructurales
  • Directivas de atributo

Componente

es también un tipo de directiva con plantilla, estilos y parte lógica que es el tipo más famoso de directiva entre todos en angular2. En este tipo de directiva, puede usar otras directivas, ya sea personalizada o incorporada en la anotación @component como se muestra a continuación:

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

utilice esta directiva en su vista como:

  

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

Directivas estructurales

como * ngFor y * ngSi se usa para cambiar el diseño DOM al agregar y eliminar elementos DOM. explicado aquí

Directivas de atributo

se utilizan para dar un comportamiento o estilo personalizado a los elementos existentes aplicando algunas funciones / lógicas. como ngStyle es una directiva de atributos 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 directiva simple:

en primer lugar tenemos que importar la directiva de angular2 / core

 import {Directive, ElementRef, Renderer, Input} from 'angular2/core'; @Directive({ selector: '[Icheck]', }) export class RadioCheckbox { custom logic here,,,, } 

y tenemos que usar esto en la vista como a continuación:

 HEllo Directive 

para más información puedes leer el tutorial oficial aquí y aquí

Los componentes tienen su propia vista (HTML y estilos). Las directivas son solo un “comportamiento” agregado a los elementos y componentes existentes.
Component amplía la Directive .

Por eso, solo puede haber un componente en un elemento de host, pero varias directivas.

Las directivas estructurales son directivas aplicadas a elementos y se usan para agregar / eliminar contenido (sellar la plantilla). Las aplicaciones directivas * in como *ngIf hacen que se *ngIf una etiqueta implícitamente.

Para completar lo que dijo Günter, podemos distinguir dos tipos de directivas:

  • Los estructurales que actualizan el diseño DOM añadiendo o eliminando elementos. Los dos más comunes son NgFor y NgIf . Estos están vinculados al concepto de plantilla y deben estar precedidos por un * . 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 están unidos.

Espero que te ayude, Thierry

Angular 2 sigue el modelo de servicio / modelo de architecture.

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 mecanografía) que controla una parte de la pantalla.

Para las buenas prácticas, la clase de componente se utiliza para el enlace de datos a la vista respectiva. El enlace de datos bidireccional es una gran característica proporcionada por el marco angular.

Los componentes son reutilizables en su aplicación utilizando el nombre del selector provisto.

El componente es también un tipo de directiva con una plantilla.

Otras dos directivas son

  1. Directivas estructurales: cambia el diseño DOM añadiendo y eliminando elementos DOM. Ej: NgFor y NgIf .

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

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 atributos
  • de lo contrario, es una Directiva estructural .

Cualquier otra definición es incorrecta.