Je viens de commencer à travailler avec Angular 2.
Je me demandais quelles sont les différences entre les composants et les directives dans Angular 2?
Fondamentalement, il existe trois types de directives dans Angular2 selon la documentation.
C'est aussi un type de directive avec modèle, styles et partie logique qui est le type de directive le plus connu parmi tous dans Angular2. Dans ce type de directive, vous pouvez utiliser d'autres directives, qu'elles soient personnalisées ou intégrées à l'annotation @Component
, comme suit:
@Component({
selector: "my-app"
directives: [custom_directive_here]
})
Utilisez cette directive dans votre vue comme:
<my-app></my-app>
Pour la directive de composant, j'ai trouvé le meilleur tutoriel ici.
Comme *ngFor
et *ngIf
, ils permettent de modifier la disposition du DOM en ajoutant et en supprimant des éléments DOM. expliqué ici
Ils sont utilisés pour attribuer un comportement ou un style personnalisé aux éléments existants en appliquant certaines fonctions/logiques. Like ngStyle
est une directive attributaire permettant de donner un style dynamique aux éléments. Nous pouvons créer notre propre directive et l'utiliser comme attribut de certains éléments prédéfinis ou personnalisés, voici l'exemple d'une directive simple:
Premièrement, nous devons importer la directive de @angular/core
import {Directive, ElementRef, Renderer, Input} from '@angular/core';
@Directive({
selector: '[Icheck]',
})
export class RadioCheckbox {
// custom logic here...
}
Nous pouvons l'utiliser dans la vue ci-dessous:
<span Icheck>HEllo Directive</span>
Pour plus d'informations, vous pouvez lire le tutoriel officiel ici et ici
Les composants ont leur propre vue (HTML et styles). Les directives ne sont que du "comportement" ajouté aux éléments et composants existants.Component
étend Directive
.
De ce fait, il ne peut y avoir qu'un seul composant sur un élément Host, mais plusieurs directives.
Les directives structurelles sont des directives appliquées aux éléments <template>
et utilisées pour ajouter/supprimer du contenu (marquer le modèle). Le *
dans les applications de directive telles que *ngIf
provoque la création implicite d'une balise <template>
.
Pour compléter les propos de Günter, nous pouvons distinguer deux types de directives:
NgFor
et NgIf
. Ceux-ci sont liés au concept de modèle et doivent être préfixés par un *
. Voir la section "Modèles et *" dans ce lien pour plus de détails: http://victorsavkin.com/post/119943127151/angular-2-template-syntaxJ'espère que ça vous aide, Thierry
Angular 2 suit le modèle d'architecture composant/service.
Une angular 2 Application est composée de composants. Un composant est la combinaison d'un modèle HTML et d'une classe de composants (classe A TypeScript) qui contrôle une partie de l'écran.
Pour les bonnes pratiques, la classe de composant est utilisée pour la liaison de données à la vue respective. La liaison de données bidirectionnelle est une fonctionnalité intéressante fournie par le framework angular.
Les composants sont réutilisables dans votre application à l'aide du nom de sélecteur fourni.
Le composant est aussi une sorte de directive avec un template.
Deux autres directives sont
Directives structurelles: modifiez la disposition du DOM en ajoutant et en supprimant des éléments DOM. Ex: NgFor
et NgIf
.
Directives d'attributs: modifiez l'apparence ou le comportement d'un élément, d'un composant ou d'une autre directive. Ex: NgStyle
Voici la définition actuelle.
Toute autre définition est fausse.
Un composant est une directive avec une vue associée (c'est-à-dire que HTML doit être rendu). Tous les composants sont des directives, mais toutes les directives ne sont pas des composants. Il existe trois types de directives:
*ngIf
qui peut insérer ou supprimer un élément DOM (ou un composant angular qui est un élément DOM personnalisé, mais toujours un élément 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;
}
Dans l'exemple ci-dessus, nous pouvons observer ce qui suit:
AppComponent
a un modèle avec un élément <div>
qui affiche, hi ici.<div>
. Cela signifie qu'il va manipuler le comportement de l'élément <div>
. Dans ce cas, le texte sera surligné et deviendra jaune.*ngIf
est également située sur l'élément <div>
et déterminera si l'élément doit être inséré. Le <div>
sera affiché conditionnellement selon que l'expression myBool
peut être contrainte à true
.En réalité, les composants sont aussi des directives, mais présentent des différences entre elles.
Directives d'attribut :
Les directives d'attribut sont des classes pouvant modifier le comportement ou l'apparence d'un seul élément. Pour créer une directive d'attribut, appliquez le @Directive
à une 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");
}
}
Ajout d'un attribut de directive template.html Fichier
<tr *ngFor="let item of getProducts(); let i = index" custom-attr>
<td>{{i + 1}}</td>
<td>{{item.name}}</td>
</tr>
Directives structurelles :
Les directives structurelles modifient la présentation du document HTML en ajoutant et en supprimant des éléments, sous forme de micro-modèles. Les directives structurelles permettent l’ajout conditionnel de contenu basé sur le résultat d’une expression telle que*ngIf
ou la répétition du même contenu pour chaque objet d’une source de données tel que *ngFor
.
Vous pouvez utiliser les directives intégrées pour les tâches courantes, mais l'écriture de directives structurelles personnalisées permet d'adapter le comportement à votre application.
<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>
Composants :
Les composants sont des directives qui ont leurs propres modèles, plutôt que de s'appuyer sur du contenu fourni ailleurs. Les composants ont accès à toutes les fonctionnalités de directive, ont toujours un élément Host, peuvent toujours définir les propriétés d'entrée et de sortie, etc., mais ils définissent également leur propre contenu.
Il est facile de sous-estimer l'importance du modèle, mais les directives d'attribut et de structure ont des limites. Les directives peuvent faire un travail utile et puissant, mais elles n’ont pas une idée précise des éléments auxquels elles sont appliquées. Les directives sont particulièrement utiles lorsqu'elles sont des outils généraux, tels que la directive ngModel
, qui peut être appliquée à toute propriété de modèle de données et à tout élément de formulaire, sans tenir compte de l'utilisation des données ou de l'élément.
Les composants, en revanche, sont étroitement liés au contenu de leurs modèles. Les composants fournissent les données et la logique qui seront utilisées par les liaisons de données appliquées aux éléments HTML du modèle, qui fournissent le contexte utilisé pour évaluer les expressions de liaison de données et servent de lien entre les directives et le reste de l'application. Les composants sont également un outil utile car ils permettent de scinder les grands projets Angular en plusieurs parties gérables.
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;
}