Un @Component richiede una vista mentre una @Directive no.

direttive

Applico una direttiva @ a una direttiva Angular 1.0 con l’opzione restrict: 'A' (le direttive non sono limitate all’utilizzo degli attributi.) Le direttive aggiungono un comportamento a un elemento DOM esistente oa un’istanza di componente esistente. Un caso d’uso di esempio per una direttiva sarebbe quello di registrare un clic su un elemento.

 import {Directive} from '@angular/core'; @Directive({ selector: "[logOnClick]", hostListeners: { 'click': 'onClick()', }, }) class LogOnClick { constructor() {} onClick() { console.log('Element clicked!'); } } 

Quale sarebbe usato in questo modo:

 I log when clicked! 

componenti

Un componente, piuttosto che aggiungere / modificare un comportamento, crea in realtà una propria vista (gerarchia di elementi DOM) con un comportamento collegato. Un caso d’uso di esempio per questo potrebbe essere un componente della scheda di contatto:

 import {Component, View} from '@angular/core'; @Component({ selector: 'contact-card', template: ` 
 
{{name}}
 
{{city}}
 
 ` }) class ContactCard { @Input() name: string @Input() city: string constructor() {} } 

Quale sarebbe usato in questo modo:

ContactCard è un componente dell’interfaccia utente riutilizzabile che è ansible utilizzare ovunque nella nostra applicazione, anche all’interno di altri componenti. Questi fondamentalmente costituiscono gli elementi costitutivi dell’interfaccia utente delle nostre applicazioni.

In sintesi

Scrivi un componente quando desideri creare un set riutilizzabile di elementi DOM dell’interfaccia utente con comportamento personalizzato. Scrivi una direttiva quando vuoi scrivere un comportamento riutilizzabile per integrare elementi DOM esistenti.

fonti:

• @ Documentazione direttiva
• Documentazione @Component
• Post del blog utile

componenti

1. Per registrare un componente usiamo l’ @Component meta-dati @Component .
2. Component è una direttiva che usa shadow DOM per creare comportamenti visivi incapsulati chiamati componenti. I componenti vengono in genere utilizzati per creare widget dell’interfaccia utente.
3. Il componente viene utilizzato per suddividere l’applicazione in componenti più piccoli.
4. Solo un componente può essere presente per elemento DOM.
5. @View decorator o template template sono necessari nel componente.

Direttiva

1. Per registrare le direttive usiamo l’annotazione @Directive meta-dati.
2. La direttiva viene utilizzata per aggiungere un comportamento a un elemento DOM esistente.
3. La direttiva è utilizzata per progettare componenti riutilizzabili.
4. Molte direttive possono essere utilizzate per elemento DOM.
5. La direttiva non usa View.

fonti:

http://www.codeandyou.com/2016/01/difference-between-component-and-directive-in-Angular2.html

Un componente è una direttiva-con-un-modello e il decoratore @Component è in realtà un decoratore @Directive esteso con funzionalità orientate ai modelli.

In Angular 2 e versioni successive, “tutto è un componente”. I componenti sono il modo principale in cui creiamo e specificiamo elementi e logica nella pagina, attraverso elementi e attributi personalizzati che aggiungono funzionalità ai componenti esistenti.

http://learnangular2.com/components/

Ma quali sono le direttive in Angular2 +?

Le direttive attributo attribuiscono il comportamento agli elementi.

Esistono tre tipi di direttive in Angular:

1. Direttive di componenti con un modello.
2. Direttive strutturali: consente di modificare il layout DOM aggiungendo e rimuovendo gli elementi DOM.
3. Direttive sugli attributi: modificano l’aspetto o il comportamento di un elemento, un componente o un’altra direttiva.

https://angular.io/docs/ts/latest/guide/attribute-directives.html

Quindi, cosa sta succedendo in Angular2 e sopra, le direttive sono attributi che aggiungono funzionalità ad elementi e componenti .

Guarda l’esempio qui sotto da Angular.io:

 import { Directive, ElementRef, Input } from '@angular/core'; @Directive({ selector: '[myHighlight]' }) export class HighlightDirective { constructor(el: ElementRef) { el.nativeElement.style.backgroundColor = 'yellow'; } } 

Quindi, che cosa fa, estenderà componenti e elementi HTML con l’aggiunta di uno sfondo giallo e puoi usarlo come di seguito:

 
Highlight me! 

Ma i componenti creeranno elementi completi con tutte le funzionalità come di seguito:

 import { Component } from '@angular/core'; @Component({ selector: 'my-component', template: ` 
Hello my name is {{name}}. Say my name 
 ` }) export class MyComponent { name: string; constructor() { this.name = 'Alireza' } sayMyName() { console.log('My name is', this.name) } } 

e puoi usarlo come di seguito:

Quando usiamo il tag nell’HTML, questo componente verrà creato e il costruttore verrà chiamato e reso.

Cambia rilevamento

Solo @Component può essere un nodo nell’albero di rilevamento delle modifiche. Ciò significa che non puoi impostare ChangeDetectionStrategy.OnPush in una @Directive . Nonostante ciò, una direttiva può avere proprietà @Input e @Output ed è ansible iniettare e manipolare ChangeDetectorRef del componente host da esso. Quindi utilizzare i componenti quando è necessario un controllo granulare sulla struttura di rilevamento delle modifiche.

In un contesto di programmazione, le direttive forniscono una guida al compilatore per modificare il modo in cui altrimenti elaborerebbe l’input, ovvero modificando alcuni comportamenti.

“Le direttive consentono di colbind il comportamento agli elementi nel DOM.”

le direttive sono suddivise nelle 3 categorie:

• Attributo
• Strutturale
• Componente

Sì, in Angular 2, i componenti sono un tipo di direttiva. Secondo il documento,

“I componenti angolari sono un sottoinsieme di direttive. A differenza delle direttive, i componenti hanno sempre un modello e solo un componente può essere istanziato per un elemento in un modello. ”

Angular 2 Components è un’implementazione del concetto Web Component . I componenti Web sono costituiti da diverse tecnologie separate. È ansible pensare a Componenti Web come widget dell’interfaccia utente riutilizzabile creati utilizzando la tecnologia Web aperta.

• Quindi le direttive sumrie Il meccanismo con cui attribuiamo il comportamento agli elementi nel DOM, composto da tipi strutturali, di attributi e di componenti.
• I componenti sono il tipo specifico di direttiva che ci consente di utilizzare la funzionalità dei componenti Web. Riutilizzabilità AKA: elementi incapsulati e riutilizzabili disponibili in tutta la nostra applicazione.