Quelle est la différence entre @Component
et @Directive
dans Angular? Les deux semblent faire la même tâche et ont les mêmes attributs.
Quels sont les cas d'utilisation et quand préférer l'un à l'autre?
Un composant @ nécessite une vue, contrairement à @Directive.
Je compare une directive @Directive à une directive angulaire 1.0 avec l'option (Les directives ne sont pas limitées à l'utilisation d'attributs.) Les directives ajoutent un comportement à un élément DOM existant ou à une instance de composant existante. Un exemple d'utilisation d'une directive serait de consigner un clic sur un élément.restrict: 'A'
import {Directive} from '@angular/core';
@Directive({
selector: "[logOnClick]",
hostListeners: {
'click': 'onClick()',
},
})
class LogOnClick {
constructor() {}
onClick() { console.log('Element clicked!'); }
}
Ce qui serait utilisé comme suit:
<button logOnClick>I log when clicked!</button>
Plutôt que d’ajouter ou de modifier un comportement, un composant crée sa propre vue (hiérarchie d’éléments DOM) avec comportement attaché. Un exemple de cas d'utilisation pourrait être un composant de carte de contact:
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() {}
}
Ce qui serait utilisé comme suit:
<contact-card [name]="'foo'" [city]="'bar'"></contact-card>
ContactCard
est un composant d'interface utilisateur réutilisable que nous pourrions utiliser n'importe où dans notre application, même au sein d'autres composants. Celles-ci constituent essentiellement les blocs de construction d'interface utilisateur de nos applications.
Ecrivez un composant lorsque vous souhaitez créer un ensemble d'éléments d'interface utilisateur DOM réutilisables avec un comportement personnalisé. Ecrivez une directive lorsque vous souhaitez écrire un comportement réutilisable pour compléter des éléments DOM existants.
Sources:
Composants
@Component
de méta-données.@View
decorator ou templateurl sont obligatoires dans le composant.Directive
@Directive
de méta-données.Sources:
http://www.codeandyou.com/2016/01/difference-between-component-and-directive-in-Angular2.html
Un composant est une directive avec modèle et le décorateur @Component
est en réalité un décorateur @Directive
étendu avec des fonctionnalités orientées modèle.
Dans Angular 2 et supérieur, «tout est un composant». Les composants sont la manière principale de construire et de spécifier les éléments et la logique sur la page, via des éléments et des attributs personnalisés qui ajoutent des fonctionnalités à nos composants existants.
http://learnangular2.com/components/
Mais que font alors les directives dans Angular2 +?
Les directives d'attribut associent le comportement aux éléments.
Il existe trois types de directives dans Angular:
- Composants - directives avec un modèle.
- Directives structurelles - changement la disposition DOM en ajoutant et en supprimant des éléments DOM.
- Directives d'attribut: modifiez l'apparence ou le comportement d'un élément, composant, ou une autre directive.
https://angular.io/docs/ts/latest/guide/attribute-directives.html
Ainsi, dans Angular2 et au-dessus, Directives sont des attributs qui ajoutent des fonctionnalités à elements et components.
Regardez l'exemple ci-dessous de Angular.io:
import { Directive, ElementRef, Input } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
Ainsi, il étend les composants et les éléments HTML avec l’ajout d’arrière-plan jaune et vous pouvez l’utiliser comme suit:
<p myHighlight>Highlight me!</p>
Mais les composants créeront des éléments complets avec toutes les fonctionnalités comme ci-dessous:
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)
}
}
et vous pouvez l'utiliser comme ci-dessous:
<my-component></my-component>
Lorsque nous utilisons la balise dans le code HTML, ce composant est créé et le constructeur est appelé et rendu.
Seul @Component
peut être un nœud de l’arborescence de détection des modifications. Cela signifie que vous ne pouvez pas définir ChangeDetectionStrategy.OnPush
dans un @Directive
. Malgré ce fait, une directive peut avoir les propriétés @Input
et @Output
et vous pouvez y injecter et manipuler la variable ChangeDetectorRef
du composant hôte. Utilisez donc Components lorsque vous avez besoin d'un contrôle granulaire de votre arbre de détection des modifications.
Dans un contexte de programmation, les directives conseillent au compilateur de modifier la manière dont il traiterait autrement les entrées, c’est-à-dire de modifier certains comportements.
"Les directives vous permettent d'attacher un comportement aux éléments du DOM."
les directives sont réparties en 3 catégories:
Oui, dans Angular 2, les composants sont un type de directive . Selon le Doc,
«Les composants angulaires sont un sous-ensemble de directives. Contrairement aux directives, les composants ont toujours un modèle et un seul composant peut être instancié par élément dans un modèle. ”
Les composants angulaires 2 sont une implémentation du concept composant Web . Les composants Web se composent de plusieurs technologies distinctes. Vous pouvez considérer les composants Web comme des widgets d'interface utilisateur réutilisables créés à l'aide de la technologie Web ouverte.
Si vous vous référez aux documents angulaires officiels
https://angular.io/guide/attribute-directives
Il existe trois types de directives dans Angular:
Au fur et à mesure que l'application grandit, nous rencontrons des difficultés pour maintenir tous ces codes. Pour des raisons de réutilisabilité, nous séparons notre logique en composants intelligents et composants stupides et nous utilisons des directives (structurelles ou d'attributs) pour apporter des modifications au DOM.
Les composants constituent l'élément de base de l'interface utilisateur le plus élémentaire d'une application Angular. Une application Angular contient un arbre composé de Angular. Notre application dans Angular est construite sur une arborescence de composants . Chaque composant doit avoir son modèle, style, cycle de vie, sélecteur, etc. . Ainsi, chaque composant a sa structure . Vous pouvez les traiter comme des petits application Web avec son propre modèle et sa propre logique, possibilité de communiquer et d'être utilisée avec d'autres composants.
Exemple de fichier .ts pour Component:
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';
}
et sa vue de modèle ./app.component.html:
Hello {{title}}
Ensuite, vous pouvez rendre le modèle AppTrainingComponent avec sa logique dans d'autres composants (après l'avoir ajouté au module).
<div>
<app-training></app-training>
</div>
et le résultat sera
<div>
my-app-training
</div>
comme AppTrainingComponent a été rendu ici
La directive modifie l'apparence ou le comportement d'un élément DOM existant. Par exemple, [ngStyle] est une directive. Les directives peuvent étendre des composants (peuvent être utilisées à l'intérieur de ceux-ci) mais elles ne construisent pas une application complète . Disons qu'ils ne prennent en charge que des composants. Ils n'ont pas son propre modèle (mais vous pouvez bien sûr manipuler un modèle avec eux).
Exemple de directive:
@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;
}
}
Et son utilisation:
<p [appHighlight]="color" [otherPar]="someValue">Highlight me!</p>