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

Respuestas:

105

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í.

Pardeep Jain
fuente
¿De qué tipo es la directiva "router-outlet"? No coincide, en mi opinión, con ninguno de los tres tipos anteriores.
user2516186
1
aquí vamos un buen tutorial: dev6.com/angular/angular-2-the-three-types-of-directives
Flames
64

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.

Günter Zöchbauer
fuente
7

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

Espero que te ayude, Thierry

Thierry Templier
fuente
2
No veo el propósito de las directivas de atributos. ¿Qué ofrecen más allá de CSS?
Tim McNamara
3
@TimMcNamara, las directivas angulares pueden tener lógica / métodos, por lo que puede hacer más con una directiva de atributo de lo que puede hacer solo con CSS. Puede pasar algún valor de propiedad principal a una directiva de atributo y hacer que el elemento aparezca o se comporte de manera diferente en función de ese valor de propiedad.
Mark Rajcok
Puede encontrar un buen ejemplo aquí: angular.io/docs/ts/latest/guide/attribute-directives.html
Joris Brauns
6

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.

John Henckel
fuente
3

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.
Willem van der Veen
fuente
2

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

Malatesh Patil
fuente
0

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

fgul
fuente