Ho appena iniziato a lavorare con Angular 2.

Mi chiedevo quali sono le differenze tra componenti e direttive in Angular 2?

Fondamentalmente ci sono tre tipi di direttive in Angular2 secondo la documentazione.

• Componente
• Direttive strutturali
• Direttive sugli attributi

Componente

È anche un tipo di direttiva con template, stili e parte logica che è il tipo di direttiva più famoso tra tutti in Angular2. In questo tipo di direttiva puoi usare altre direttive, sia personalizzate che incorporate nell'annotazione @Componentcome segue:

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

Usa questa direttiva a tuo avviso come:

<my-app></my-app>

Per la direttiva sui componenti ho trovato il miglior tutorial qui.

Direttive strutturali

Come *ngFore *ngIf, utilizzato per modificare il layout DOM aggiungendo e rimuovendo elementi DOM. spiegato qui

Direttive sugli attributi

Sono usati per dare un comportamento o uno stile personalizzato agli elementi esistenti applicando alcune funzioni / logica. Like ngStyleè una direttiva di attributo per dare stile dinamicamente agli elementi. Possiamo creare la nostra direttiva e usarla come attributo di alcuni elementi predefiniti o personalizzati, ecco l'esempio di una semplice direttiva:

In primo luogo dobbiamo importare la direttiva da @angular/core

import {Directive, ElementRef, Renderer, Input} from '@angular/core';

@Directive({
  selector: '[Icheck]',
})
export class RadioCheckbox {
   // custom logic here...
}

Possiamo usarlo nella vista come mostrato di seguito:

<span Icheck>HEllo Directive</span>

Per maggiori info puoi leggere il tutorial ufficiale qui e qui

I componenti hanno la propria vista (HTML e stili). Le direttive sono solo "comportamenti" aggiunti a elementi e componenti esistenti.
Componentsi estende Directive.

Per questo motivo può esserci un solo componente su un elemento host, ma più direttive.

Le direttive strutturali sono direttive applicate agli <template>elementi e utilizzate per aggiungere / rimuovere contenuto (timbrare il modello). La *direttiva in application like *ngIffa sì che un <template>tag venga creato implicitamente.

Per completare quanto affermato da Günter, possiamo distinguere due tipi di direttive:

• Gli quelli strutturali che aggiorna il layout DOM aggiungendo o togliendo elementi. I due comuni sono NgFore NgIf. Questi sono collegati al concetto di modello e devono essere preceduti da un *. Vedere la sezione "Modelli e *" in questo collegamento per maggiori dettagli: http://victorsavkin.com/post/119943127151/angular-2-template-syntax
• Gli attributi che aggiorna il comportamento dell'aspetto dell'elemento sono allegati uno.

Spero che ti aiuti, Thierry

Ecco la definizione attuale.

• Se ha un modello , è un componente
• altrimenti se ha un selettore tra parentesi "[likethis]", è una direttiva sugli attributi
• altrimenti è una direttiva strutturale .

Qualsiasi altra definizione è sbagliata.

Sommario:

Un componente è una direttiva con una vista associata (cioè HTML da visualizzare). Tutti i componenti sono direttive, ma non tutte le direttive sono componenti. Esistono tre tipi di direttive:

• Componente : una vista con il comportamento associato. Questo tipo di direttiva aggiunge effettivamente elementi DOM
• Direttive sugli attributi : possono essere associate agli elementi DOM (e ai componenti poiché sono elementi DOM) per modificare l'aspetto o il comportamento di un elemento.
• Direttive strutturali : possono essere collegate a elementi DOM (e componenti poiché sono elementi DOM) per modificare il layout DOM. Le direttive strutturali iniziano con un * e in realtà aggiungono o rimuovono l'elemento DOM. Ad esempio, *ngIfche può inserire o rimuovere un elemento DOM (o un componente angolare che è un elemento DOM personalizzato, ma pur sempre un elemento DOM).

Esempio:

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;

}

Nell'esempio sopra possiamo osservare quanto segue:

• Il componente AppComponentha un modello con un <div>elemento che viene visualizzato, ciao.
• La direttiva dell'attributo HighlightDirective si trova <div>sull'elemento. Ciò significa che manipolerà il comportamento <div>dell'elemento. In questo caso evidenzierà il testo e lo trasformerà in giallo.
• La direttiva strutturale *ngIfsi trova anche <div>sull'elemento e determinerà se l'elemento deve essere inserito. Il <div>sarà condizionatamente visualizzati a seconda se l'espressione myBoolpuò essere costretto a true.

Angular 2 segue il modello di architettura di componenti / servizi.

Un'applicazione angolare 2 è composta da componenti. Un componente è la combinazione di un modello HTML e una classe componente (una classe dattiloscritto) che controlla una parte dello schermo.

Per la buona pratica, la classe del componente viene utilizzata per l'associazione dei dati alla rispettiva vista. Il data binding bidirezionale è una grande funzionalità fornita dal framework angolare.

I componenti sono riutilizzabili nell'applicazione utilizzando il nome del selettore fornito.

Il componente è anche una sorta di direttiva con un modello.

Altre due direttive lo sono

1. Direttive strutturali: modifica il layout DOM aggiungendo e rimuovendo elementi DOM. Es: NgFore NgIf.

2. Direttive sugli attributi: modifica l'aspetto o il comportamento di un elemento, componente o un'altra direttiva. Ex: NgStyle

In realtà anche i componenti sono direttive, ma presentano differenze tra loro.

Direttive sugli attributi :

Le direttive sugli attributi sono classi in grado di modificare il comportamento o l'aspetto di un singolo elemento. Per creare una direttiva di attributo, applicare il @Directivea una classe.

import { Directive, ElementRef } from "@angular/core";

@Directive({
     selector: "[custom-attr]", })

export class CustomAttrDirective {

   constructor(element: ElementRef) {
      element.nativeElement.classList.add("bg-success", "text-white");    
   } 
}

Aggiunta di un file di attributo di direttiva template.html

<tr *ngFor="let item of getProducts(); let i = index" custom-attr>
   <td>{{i + 1}}</td>
   <td>{{item.name}}</td>
</tr>

Direttive strutturali :

Le direttive strutturali modificano il layout del documento HTML aggiungendo e rimuovendo elementi, come micro-modelli. Le direttive strutturali consentono di aggiungere il contenuto in modo condizionale in base al risultato di un'espressione come *ngIfo affinché lo stesso contenuto venga ripetuto per ogni oggetto in un'origine dati come *ngFor.

È possibile utilizzare le direttive incorporate per attività comuni, ma la scrittura di direttive strutturali personalizzate consente di adattare il comportamento alla propria applicazione.

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

Componenti :

I componenti sono direttive che hanno i propri modelli, piuttosto che fare affidamento su contenuti forniti altrove. I componenti hanno accesso a tutte le funzionalità di direttiva, hanno ancora un elemento host, possono ancora definire proprietà di input e output e così via, ma definiscono anche il proprio contenuto.

Può essere facile sottovalutare l'importanza del modello, ma gli attributi e le direttive strutturali hanno dei limiti. Le direttive possono svolgere un lavoro utile e potente, ma non hanno una visione approfondita degli elementi a cui vengono applicate. Le direttive sono più utili quando sono strumenti generici, come la ngModeldirettiva, che può essere applicata a qualsiasi proprietà del modello di dati e qualsiasi elemento del modulo, indipendentemente dal motivo per cui vengono utilizzati i dati o l'elemento.

I componenti, al contrario, sono strettamente legati al contenuto dei loro modelli. I componenti forniscono i dati e la logica che verranno utilizzati dalle associazioni di dati applicate agli elementi HTML nel modello, che forniscono il contesto utilizzato per valutare le espressioni di associazione dei dati e fungono da collante tra le direttive e il resto dell'applicazione. I componenti sono anche uno strumento utile per consentire la suddivisione di grandi progetti angolari in blocchi gestibili.

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;
}

da angolare ufficiale

dal libro Pro-Angular