Qual è la differenza tra @Component
e @Directive
in Angular? Entrambi sembrano fare lo stesso compito e avere gli stessi attributi.
Quali sono i casi d’uso e quando preferire uno rispetto all’altro?
Un @Component richiede una vista mentre una @Directive no.
Applico una direttiva @ a una direttiva Angular 1.0 con l’opzione (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. restrict: 'A'
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:
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.
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:
componenti
@Component
meta-dati @Component
. @View
decorator o template template sono necessari nel componente. Direttiva
@Directive
meta-dati. 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:
- Direttive di componenti con un modello.
- Direttive strutturali: consente di modificare il layout DOM aggiungendo e rimuovendo gli elementi DOM.
- 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}}. ` }) 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.
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:
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.