@Directive vs @Component en angulaire

Quelle est la différence entre @Componentet @Directivedans Angular? Les deux semblent faire la même tâche et ont les mêmes attributs.

Quels sont les cas d'utilisation et quand les préférer les uns aux autres?

Un @Component nécessite une vue, contrairement à @Directive.

Directives

Je compare un @Directive à une directive Angular 1.0 avec l'optionrestrict: 'A' (Les directives ne sont pas limitées à l'utilisation des attributs.) Les directives ajoutent un comportement à un élément DOM existant ou à une instance de composant existante. Un exemple d'utilisation pour une directive serait d'enregistrer un clic sur un élément.

import {Directive} from '@angular/core';

@Directive({
    selector: "[logOnClick]",
    hostListeners: {
        'click': 'onClick()',
    },
})
class LogOnClick {
    constructor() {}
    onClick() { console.log('Element clicked!'); }
}

Qui serait utilisé comme ça:

<button logOnClick>I log when clicked!</button>

Composants

Un composant, plutôt que d'ajouter / modifier un comportement, crée en fait sa propre vue (hiérarchie des éléments DOM) avec un comportement attaché. Un exemple d'utilisation peut être un composant de carte de visite:

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() {}
}

Qui serait utilisé comme ça:

<contact-card [name]="'foo'" [city]="'bar'"></contact-card>

ContactCardest un composant d'interface utilisateur réutilisable que nous pourrions utiliser n'importe où dans notre application, même au sein d'autres composants. Ceux-ci constituent essentiellement les blocs de construction de l'interface utilisateur de nos applications.

En résumé

Écrivez un composant lorsque vous souhaitez créer un ensemble réutilisable d'éléments DOM de l'interface utilisateur avec un comportement personnalisé. Écrivez une directive lorsque vous souhaitez écrire un comportement réutilisable pour compléter les éléments DOM existants.

Sources:

• Documentation @Directive
• Documentation @Component
• Article de blog utile

Composants

1. Pour enregistrer un composant, nous utilisons @Componentl'annotation de métadonnées.
2. Le composant est une directive qui utilise le DOM fantôme pour créer un comportement visuel encapsulé appelé composants. Les composants sont généralement utilisés pour créer des widgets d'interface utilisateur.
3. Le composant est utilisé pour diviser l'application en composants plus petits.
4. Un seul composant peut être présent par élément DOM.
5. @View le modèle décorateur ou modèle est obligatoire dans le composant.

Directif

1. Pour enregistrer les directives, nous utilisons @Directivel'annotation de métadonnées.
2. La directive est utilisée pour ajouter un comportement à un élément DOM existant.
3. La directive est utilisée pour concevoir des composants réutilisables.
4. De nombreuses directives peuvent être utilisées par élément DOM.
5. La directive n'utilise pas View.

Sources:

http://www.codeandyou.com/2016/01/difference-between-component-and-directive-in-Angular2.html

Un composant est une directive avec un modèle et le @Componentdécorateur est en fait un @Directivedécorateur étendu avec des fonctionnalités orientées modèle.

Dans Angular 2 et supérieur, «tout est un composant». Les composants sont la principale façon dont nous créons et spécifions les éléments et la logique sur la page, à travers des éléments et des attributs personnalisés qui ajoutent des fonctionnalités à nos composants existants.

http://learnangular2.com/components/

Mais quelles directives font alors dans Angular2 +?

Les directives d'attribut attachent le comportement aux éléments.

Il existe trois types de directives dans Angular:

1. Composants - directives avec un modèle.
2. Directives structurelles: modifiez la disposition DOM en ajoutant et en supprimant des éléments DOM.
3. Directives d'attribut: modifiez l'apparence ou le comportement d'un élément, d'un composant ou d'une autre directive.

https://angular.io/docs/ts/latest/guide/attribute-directives.html

Donc, ce qui se passe dans Angular2 et au-dessus, c'est que les directives sont des attributs qui ajoutent des fonctionnalités aux éléments et composants .

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';
    }
}

Donc, ce qu'il fait, il vous étendra les composants et les éléments HTML en ajoutant un fond jaune et vous pouvez l'utiliser comme ci-dessous:

<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 HTML, ce composant sera créé et le constructeur sera appelé et rendu.

Détection de changement

Seul @Componentpeut être un nœud dans l'arborescence de détection des modifications. Cela signifie que vous ne pouvez pas définir ChangeDetectionStrategy.OnPushun @Directive. En dépit de ce fait, une directive peut avoir @Inputet @Outputpropriétés et vous pouvez injecter et manipuler du composant hôte ChangeDetectorRefde celui - ci. Utilisez donc les composants lorsque vous avez besoin d'un contrôle granulaire sur votre arborescence de détection des modifications.

Dans un contexte de programmation, les directives fournissent au compilateur des conseils pour modifier la façon dont il traiterait autrement l'entrée, c'est-à-dire pour changer un comportement.

"Les directives vous permettent d'attacher un comportement aux éléments du DOM."

les directives sont divisées en 3 catégories:

• Attribut
• De construction
• Composant

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 Angular 2 sont une implémentation du concept de 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.

• Donc, dans les directives récapitulatives Le mécanisme par lequel nous attachons le comportement aux éléments du DOM, composé des types Structural, Attribute et Component.
• Les composants sont le type spécifique de directive qui nous permet d'utiliser la fonctionnalité de réutilisation des composants Web AKA - des éléments réutilisables encapsulés disponibles dans toute notre application.

Si vous référez les documents angulaires officiels

https://angular.io/guide/attribute-directives

Il existe trois types de directives dans Angular:

1. Composants - directives avec un modèle.
2. Directives structurelles: modifiez la disposition DOM en ajoutant et en supprimant des éléments DOM. par exemple * ngIf
3. Directives d'attribut: modifiez l'apparence ou le comportement d'un élément, d'un composant ou d'une autre directive. par exemple [ngClass].

Au fur et à mesure que l'application grandit, nous éprouvons des difficultés à maintenir tous ces codes. À des fins de réutilisabilité, nous séparons notre logique en composants intelligents et composants stupides et nous utilisons des directives (structurelles ou attributaires) pour apporter des modifications dans le DOM.

Composants

Les composants sont le bloc de construction d'interface utilisateur le plus basique d'une application Angular. Une application angulaire contient une arborescence de composants angulaires. Notre application en Angular est construite sur une arborescence de composants . Chaque composant doit avoir son modèle, son style, son cycle de vie, son sélecteur, etc. Ainsi, chaque composant a sa structure. Vous pouvez les traiter comme une petite application Web autonome avec un modèle et une logique propres et une possibilité de communiquer et d'être utilisé avec d'autres Composants.

Exemple de fichier .ts pour le composant:

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

En savoir plus sur les composants

Directives

La directive modifie l'apparence ou le comportement d'un élément DOM existant. Par exemple, [ngStyle] est une directive. Les directives peuvent étendre les composants (peuvent être utilisées à l'intérieur) mais elles ne construisent pas une application entière . Disons qu'ils prennent simplement en charge les composants. Ils n'ont pas leur propre modèle (mais bien sûr, vous pouvez manipuler le 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>

En savoir plus sur les directives