web-dev-qa-db-fra.com

@Directive v/s @Component in Angular

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?

javascriptangulartypescript
321
Prasanjit Dey

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

Les directives

Je compare une directive @Directive à une directive angulaire 1.0 avec l'option restrict: 'A' (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.

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>

Composants

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.

En résumé

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:

424
jaker

Composants

  1. Pour enregistrer un composant, nous utilisons l'annotation @Component de méta-données.
  2. 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. Composant est utilisé pour diviser l'application en composants plus petits.
  4. Un seul composant peut être présent par élément DOM.
  5. Les modèles @View decorator ou templateurl sont obligatoires dans le composant.

Directive

  1. Pour enregistrer des directives, nous utilisons l'annotation @Directive de méta-données.
  2. La directive est utilisée pour ajouter un comportement à un élément DOM existant. 
  3. La directive sert à 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

64
virender

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.

48
yusuf tezel

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:

  1. Composants - directives avec un modèle.
  2. Directives structurelles - changement 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, 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.

20
Alireza

Détection de changement

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.

6
Evgeniy Malyutin

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: 

  • 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 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.

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

Si vous vous référez aux 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 du 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 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.

0
Akshay Rajput

Composants

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

Voir 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 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>

Voir plus sur les directives

0
Przemek Struciński