Quelle est la différence entre le composant et la directive?
Je viens de commencer à travailler avec Angular 2.
Je me demandais quelles sont les différences entre les composants et les directives Angulaire 2?
5 réponses
Fondamentalement, il existe trois types de directives dans angular2 selon la documentation.
- Composant
- directives structurelles
- directives D'attribut
Composant
Est également un type de directive avec template, styles et partie logique qui est le type de directive le plus célèbre parmi tous dans angular2. Dans ce type de directive, vous pouvez utiliser d'autres directives, qu'elles soient personnalisées ou intégrées dans l'annotation @ component, comme suivant:
@Component({
selector: "my-app"
directives: [custom_directive_here]
})
Utilisez cette directive à votre avis comme:
<my-app></my-app>
Pour la directive component, j'ai trouvé le meilleur tutoriel ici.
Directives structurelles
Comme * ngFor et * ngIf utilisé pour modifier la disposition DOM en ajoutant et en supprimant des éléments DOM. expliqué ici
Directives D'attribut
Sont utilisés pour donner un comportement ou un style personnalisé aux éléments existants en appliquant certaines fonctions / logiques. comme ngStyle est un attribut directive pour donner du style dynamiquement 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 de directive simple:
Tout d'Abord, nous devons importer la directive de angular2/core
import {Directive, ElementRef, Renderer, Input} from 'angular2/core';
@Directive({
selector: '[Icheck]',
})
export class RadioCheckbox {
custom logic here,,,,
}
Et nous devons l'utiliser dans la vue comme ci-dessous:
<span Icheck>HEllo Directive</span>
Pour plus d'info, vous pouvez lire le tutoriel officiel ici et ici
Les composants
Ont leur propre vue (HTML et styles). Les Directives ne sont que des "comportements" ajoutés aux éléments et composants existants.Component s'étend Directive.
Pour cette raison, il ne peut y avoir qu'un seul composant sur un élément hôte, mais plusieurs directives.
Les directives structurelles sont des directives appliquées aux éléments <template> et utilisées pour ajouter / supprimer du contenu (tamponner le modèle).
Le * dans les applications de directive comme *ngIf provoque la création implicite d'une balise <template>.
Pour compléter ce que dit Günter, nous pouvons distinguer deux types de directives:
- les structurels {[8] } qui mettent à jour la disposition DOM en ajoutant ou en supprimant des éléments. Les deux communes sont
NgForetNgIf. 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-syntax - l'attribut ceux qui mises à jour le comportement de l'apparence de l'élément qu'ils sont attachés l'un.
J'espère que cela vous aidera, Thierry
Angular 2 suit le modèle d'architecture composant/Service.
Une application angulaire 2 est faite de composants. Un composant est la combinaison D'un modèle HTML et d'une classe de Composant (une classe typescript) qui contrôle une partie de l'écran.
Pour la bonne pratique, la classe component est utilisée pour la liaison de données à la vue respective. La liaison de données bidirectionnelle est une excellente fonctionnalité fournie par Angular framework.
Les composants sont réutilisables dans votre application à l'aide nom du sélecteur fourni.
Le composant est également une sorte de directive avec un modèle.
Les deux autres directives sont
Directives structurelles-Modifiez la disposition DOM en ajoutant et en supprimant des éléments DOM. Ex:
NgForetNgIf.Attribut directives-modifier l'apparence ou le comportement d'un élément, d'un composant ou d'une autre directive. Ex:
NgStyle
Voici la définition réelle.
- S'il a un modèle , c'est un composant
- sinon, s'il a un sélecteur entre parenthèses " [likethis]", il s'agit d'une Directive D'attribut
- sinon c'est une directive structurelle .
Toute autre définition est fausse.