javascript - change - ng for angular 6

@Directive v/s @Component en angular

Question

¿Cuál es la diferencia entre @Component y @Directive en 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?

Answer 1

En Angular 2 y versiones posteriores, "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 asocian el comportamiento a los elementos.

Hay tres tipos de directivas en Angular:

1. Componentes: directivas con una plantilla.
2. Directivas estructurales: cambie el diseño del DOM agregando y eliminando elementos DOM.
3. Directivas de atributos: cambian 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 sucede en Angular2 y versiones posteriores 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 es extender sus componentes y elementos HTML al agregar 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, se creará este componente y se llamará y se representará al constructor.

Answer 2

Detección de cambio

Solo @Component puede ser un nodo en el árbol de detección de cambios. Esto significa que no puede establecer ChangeDetectionStrategy.OnPush en un @Directive . A pesar de este hecho, una Directiva puede tener las propiedades @Input y @Output y puede inyectar y manipular ChangeDetectorRef del componente ChangeDetectorRef desde ella. Por lo tanto, use Componentes cuando necesite un control granular sobre su árbol de detección de cambios.

Answer 3

En un contexto de programación, las directivas brindan orientación al compilador para alterar cómo 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. De acuerdo con 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 instanciar un componente por elemento en una plantilla ".

Angular 2 Components es una implementación del concepto de componente web . Web Components consta de varias tecnologías separadas. Puede pensar en Web Components como widgets de interfaz de usuario reutilizables que se crean con tecnología web abierta.

• Entonces, en directivas de resumen El mecanismo por el cual asociamos el comportamiento a elementos en el DOM, que consiste en tipos Estructurales, de Atributos y Componentes.
• Los componentes son el tipo específico de directiva que nos permite utilizar la funcionalidad del componente web AKA reusability: elementos encapsulados y reutilizables disponibles en toda nuestra aplicación.

Answer 4

Si refieres los documentos angulares oficiales

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

Hay tres tipos de directivas en Angular:

1. Componentes: directivas con una plantilla.
2. Directivas estructurales: cambie el diseño del DOM agregando y eliminando elementos DOM. por ejemplo * ngIf
3. Directivas de atributos: cambian 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 utilizamos directivas (estructurales o de atributos) para realizar cambios en el DOM.

Answer 5

Un componente es una directiva con una plantilla y el decorador @Component es en realidad un decorador @Directive ampliado con características orientadas a la plantilla.

Answer 6

Componentes

1. Para registrar un componente utilizamos la @Component metadatos @Component .
2. Component es una directiva que usa shadow DOM para crear un comportamiento visual encapsulado llamado componentes. Los componentes se usan generalmente para crear widgets de UI.
3. El componente se utiliza para dividir la aplicación en componentes más pequeños.
4. Solo un componente puede estar presente por elemento DOM.
5. @View decorador @View o la plantilla templateurl son obligatorios en el componente.

Directiva

1. Para registrar directivas usamos la @Directive metadatos @Directive .
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

Answer 7

Un @Component requiere una vista, mientras que un @Directive no.

Directivas

Comparo un @Directive con una directiva Angular 1.0 con la opción restrict: ''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 ejemplo de caso de uso 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 ejemplo de caso de uso para esto podría ser un componente de la 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>

ContactCard es un componente de interfaz de usuario reutilizable que podríamos usar en cualquier lugar de nuestra aplicación, incluso dentro de otros componentes. Básicamente 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 IU con comportamiento personalizado. Escriba una directiva cuando desee escribir un comportamiento reutilizable para complementar los elementos DOM existentes.

Fuentes:

• @ Documentación directiva
• Documentación de @Component
• Publicación de blog útil