angular - directivas - ¿Cuál es la diferencia entre componente y directiva?

directivas en angularjs

Question

Acabo de comenzar a trabajar con Angular 2.

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

Answer 1

Resumen:

Un componente es una directiva con una vista asociada (es decir, HTML que se representará). 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 elementos DOM. Por ejemplo, *ngIf que puede insertar o eliminar un elemento DOM (o 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 AppComponent tiene una plantilla con un elemento <div> que muestra, hola.
• La directiva de atributos HighlightDirective se encuentra en el elemento <div> . Esto significa que manipulará el comportamiento del elemento <div> . En este caso, resaltará el texto y lo volverá amarillo.
• La directiva estructural *ngIf también se encuentra en el elemento <div> y determinará si el elemento se va a insertar. El <div> mostrará condicionalmente dependiendo de si la expresión myBool puede convertir en true .

Answer 2

Angular 2 sigue el modelo de arquitectura componente / servicio.

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 la buena práctica, 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 proporcionado.

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

Otras dos directivas son

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

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

Answer 3

Aquí está la definición real.

• Si tiene una plantilla , es un Componente
• de lo contrario, si tiene un selector entre paréntesis "[likethis]", es una Directiva de atributos
• de lo contrario, es una directiva estructural .

Cualquier otra definición está mal.

Answer 4

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 sea personalizadas o integradas en la anotación @Component como las siguientes:

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

Use esta directiva en su opinión como:

<my-app></my-app>

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

Directivas estructurales

Al igual que *ngFor y *ngIf , se usa para cambiar el diseño DOM al agregar y eliminar elementos DOM. explicado aquí

Directivas de atributos

Se utilizan para dar un comportamiento o estilo personalizado a los elementos existentes mediante la aplicación de algunas funciones / lógica. Al igual que 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, este es el ejemplo de una directiva simple:

En primer lugar, tenemos que importar la directiva desde @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 más información puedes leer el tutorial oficial aquí y here

Answer 5

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

Directivas de atributos :

Las directivas de atributos son clases que pueden modificar el comportamiento o la apariencia de un solo elemento. Para crear una directiva de atributo, aplique @Directive a 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 de plantilla de atributo de directiva.html

<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 condicionalmente en función del resultado de una expresión como *ngIf o que se *ngIf el mismo contenido para cada objeto en una fuente de datos como *ngFor .

Puede usar las directivas integradas para tareas comunes, pero escribir directivas estructurales personalizadas proporciona 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, todavía tienen un elemento host, 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 de atributos y estructurales 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 directiva ngModel , que se puede aplicar a cualquier propiedad del modelo de datos y a cualquier elemento de formulario, sin importar para qué se estén utilizando 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 serán utilizados por 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 actuar como el pegamento entre las directivas y el resto de la aplicación. Los componentes también son una herramienta útil para permitir que grandes proyectos angulares se dividan en fragmentos 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

Answer 6

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

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

Las directivas estructurales son directivas aplicadas a elementos <template> y se usan para agregar / eliminar contenido (estampar la plantilla). El * en aplicaciones directivas como *ngIf hace que una etiqueta <template> se cree implícitamente.

Answer 7

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

• Los here que actualizan el diseño DOM al agregar o eliminar elementos. Los dos comunes son NgFor y 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 están adjuntos.

Espero que te ayude, Thierry