Ho appena iniziato a lavorare con Angular 2.
Mi chiedevo quali sono le differenze tra componenti e direttive in Angular 2?
Ho appena iniziato a lavorare con Angular 2.
Mi chiedevo quali sono le differenze tra componenti e direttive in Angular 2?
Risposte:
Fondamentalmente ci sono tre tipi di direttive in Angular2 secondo la documentazione.
È 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 @Component
come 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.
Come *ngFor
e *ngIf
, utilizzato per modificare il layout DOM aggiungendo e rimuovendo elementi DOM. spiegato qui
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.
Component
si 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 *ngIf
fa sì che un <template>
tag venga creato implicitamente.
Per completare quanto affermato da Günter, possiamo distinguere due tipi di direttive:
NgFor
e 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-syntaxSpero che ti aiuti, Thierry
Ecco la definizione attuale.
Qualsiasi altra definizione è sbagliata.
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:
*ngIf
che può inserire o rimuovere un elemento DOM (o un componente angolare che è un elemento DOM personalizzato, ma pur sempre un elemento DOM).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:
AppComponent
ha un modello con un <div>
elemento che viene visualizzato, ciao.<div>
sull'elemento. Ciò significa che manipolerà il comportamento <div>
dell'elemento. In questo caso evidenzierà il testo e lo trasformerà in giallo.*ngIf
si trova anche <div>
sull'elemento e determinerà se l'elemento deve essere inserito. Il <div>
sarà condizionatamente visualizzati a seconda se l'espressione myBool
può 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
Direttive strutturali: modifica il layout DOM aggiungendo e rimuovendo elementi DOM. Es: NgFor
e NgIf
.
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 @Directive
a 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 *ngIf
o 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 ngModel
direttiva, 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;
}