@Directive vs @Component in Angular

Qual'è la differenza tra @Componente @Directivein Angular? Entrambi sembrano svolgere la stessa attività e avere gli stessi attributi.

Quali sono i casi d'uso e quando preferire uno rispetto all'altro?

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

direttive

Ho paragonato un @Directive a una direttiva Angular 1.0 con l'opzionerestrict: 'A' (Le direttive non si limitano all'utilizzo degli attributi.) Le direttive aggiungono comportamento a un elemento DOM esistente o a un'istanza di componente esistente. Un esempio di utilizzo di 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 così:

<button logOnClick>I log when clicked!</button>

componenti

Un componente, anziché aggiungere / modificare il comportamento, in realtà crea la propria vista (gerarchia di elementi DOM) con comportamento associato. Un esempio di utilizzo per questo potrebbe essere un componente della scheda di contatto:

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() {}
}

Quale sarebbe usato così:

<contact-card [name]="'foo'" [city]="'bar'"></contact-card>

ContactCardè un componente riutilizzabile dell'interfaccia utente che potremmo 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

Scrivere un componente quando si desidera creare un set riutilizzabile di elementi DOM dell'interfaccia utente con comportamento personalizzato. Scrivi una direttiva quando desideri scrivere comportamenti riutilizzabili per integrare elementi DOM esistenti.

fonti:

• @ Documentazione diretta
• Documentazione @Component
• Post di blog utili

componenti

1. Per registrare un componente utilizziamo @Componentl'annotazione dei metadati.
2. Componente è una direttiva che utilizza il DOM ombra per creare un comportamento visivo incapsulato chiamato 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. Può essere presente un solo componente per elemento DOM.
5. @View decoratore o templateurl sono obbligatori nel componente.

Direttiva

1. Per registrare le direttive utilizziamo @Directivel'annotazione dei metadati.
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 utilizza 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 @Componentdecoratore è in realtà un @Directivedecoratore esteso con funzionalità orientate al modello.

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

http://learnangular2.com/components/

Ma quali direttive fanno allora in Angular2 +?

Le direttive di attributo associano il comportamento agli elementi.

Esistono tre tipi di direttive in angolare:

1. Componenti: direttive con un modello.
2. Direttive strutturali: modifica il layout del DOM aggiungendo e rimuovendo elementi DOM.
3. Direttive degli attributi: modificano l'aspetto o il comportamento di un elemento, componente o altra direttiva.

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

Quindi ciò che sta accadendo in Angular2 e sopra è che le direttive sono attributi che aggiungono funzionalità a elementi e componenti .

Guarda l'esempio seguente 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, ciò che fa, ti estenderà componenti ed elementi HTML con l'aggiunta di sfondo giallo e puoi usarlo come di seguito:

<p myHighlight>Highlight me!</p>

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

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

e puoi usarlo come di seguito:

<my-component></my-component>

Quando usiamo il tag in HTML, questo componente verrà creato e il costruttore verrà chiamato e renderizzato.

Rilevazione del cambiamento

Solo @Componentpuò essere un nodo nella struttura di rilevamento delle modifiche. Ciò significa che non è possibile impostare ChangeDetectionStrategy.OnPushin a @Directive. Nonostante ciò, una direttiva può avere @Inpute @Outputproprietà e puoi iniettare e manipolare i componenti host ChangeDetectorRefda essa. Quindi utilizzare i componenti quando è necessario un controllo granulare sull'albero 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 cambiando un comportamento.

"Le direttive consentono di associare il comportamento agli elementi nel DOM".

le direttive sono suddivise in 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 di Web Component . Web Components è costituito da diverse tecnologie separate. È possibile pensare ai componenti Web come widget riutilizzabili dell'interfaccia utente creati utilizzando la tecnologia Web aperta.

• Quindi nelle direttive di sintesi Il meccanismo mediante il quale associamo il comportamento agli elementi nel DOM, costituito da tipi strutturali, di attributo 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.

Se fai riferimento ai documenti angolari ufficiali

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

Esistono tre tipi di direttive in angolare:

1. Componenti: direttive con un modello.
2. Direttive strutturali: modifica il layout del DOM aggiungendo e rimuovendo elementi DOM. es. * ngIf
3. Direttive degli attributi: modificano l'aspetto o il comportamento di un elemento, componente o altra direttiva. ad es. [ngClass].

Man mano che l'applicazione cresce, troviamo difficoltà nel mantenere tutti questi codici. Ai fini della riusabilità, separiamo la nostra logica in componenti intelligenti e componenti stupidi e utilizziamo direttive (strutturali o di attributo) per apportare modifiche al DOM.

componenti

I componenti sono l'elemento base dell'interfaccia utente più semplice di un'app angolare. Un'app angolare contiene un albero di componenti angolari. La nostra applicazione in Angular è costruita su un albero dei componenti . Ogni componente dovrebbe avere il suo modello, stile, ciclo di vita, selettore, ecc. Quindi, ogni componente ha la sua struttura. Puoi trattarli come una piccola applicazione web separata con un modello e una logica propri e la possibilità di comunicare ed essere utilizzata insieme ad altri componenti.

File .ts di esempio per il componente:

import { Component } from '@angular/core';

@Component({
    // component attributes
    selector: 'app-training',
    templateUrl: './app-training.component.html',
    styleUrls: ['./app-training.component.less']
})

export class AppTrainingComponent {
    title = 'my-app-training';
}

e la sua vista modello ./app.component.html:

Hello {{title}}

Quindi è possibile eseguire il rendering del modello AppTrainingComponent con la sua logica in altri componenti (dopo averlo aggiunto nel modulo)

<div>
   <app-training></app-training>
</div>

e il risultato sarà

<div>
   my-app-training
</div>

come AppTrainingComponent è stato reso qui

Vedi di più componenti

direttive

La direttiva modifica l'aspetto o il comportamento di un elemento DOM esistente. Ad esempio [ngStyle] è una direttiva. Le direttive possono estendere i componenti (possono essere utilizzati al loro interno) ma non creano un'intera applicazione . Diciamo che supportano solo i componenti. Non hanno un proprio modello (ma ovviamente puoi manipolarlo con loro).

Direttiva di esempio:

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) { }

  @Input('appHighlight') highlightColor: string;

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || 'red');
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

E il suo utilizzo:

<p [appHighlight]="color" [otherPar]="someValue">Highlight me!</p>

Vedi di più sulle direttive