@Directive V/S @ composant en angulaire

Quelle est la différence entre @Component et @Directive Angulaire? 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?

296
demandé sur shammelburg 2015-09-20 17:03:51

6 réponses

Un composant @nécessite une vue alors qu'une Directive @ ne le fait pas.

Directives

je compare une Directive @à une directive Angular 1.0 avec l'option restrict: '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 de cas d'utilisation pour 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!'); }
}

, Qui serait utilisé comme ceci:

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

Composants

Un le composant, plutôt que d'ajouter/modifier le comportement, crée en fait sa propre vue (hiérarchie des éléments DOM) avec un comportement attaché. Un exemple de cas d'utilisation pour cela peut ê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() {}
}

, Qui serait utilisé comme ceci:

<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 dans d'autres composants. Ceux-ci constituent essentiellement les blocs de construction de L'interface utilisateur de nos applications.

En résumé

Écrire un composant quand 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:

390
répondu jaker 2017-08-27 19:37:45

Composants

  1. Pour enregistrer un élément que nous utilisons @Component méta-annotation de données.
  2. Component est une directive qui utilise Shadow DOM pour créer un comportement visuel encapsulé appelé components. Les composants sont généralement utilisés pour créer des widgets.
  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 décorateur ou templateUrl modèle sont obligatoires dans le composant.

La Directive

  1. pour enregistrer des directives, nous utilisons @Directive annotation des méta-données.
  2. Directive est utilisée pour ajouter un comportement à un élément DOM existant.
  3. Directive est utilisé pour concevoir des composants réutilisables.
  4. de nombreuses directives peuvent être utilisées par élément DOM.
  5. la Directive n'utilise pas la vue.

Sources:

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

58
répondu virender 2017-09-28 20:20:52

Un composant est une directive-with-a-template et le décorateur @Component est en fait un décorateur @Directive étendu avec des fonctionnalités orientées template.

44
répondu yusuf tezel 2016-04-21 22:02:59

Dans Angular 2 et au-dessus, "tout est un composant."Les composants sont la principale façon de construire et de spécifier des éléments et de la logique sur la page, grâce à des éléments personnalisés et des attributs qui ajoutent des fonctionnalités à nos composants existants.

Http://learnangular2.com/components/

Mais quelles directives font alors dans Angular2+ ?

Les directives attribut attachent un comportement aux éléments.

Il y a trois types de directives dans Angulaire:

  1. Composants-directives avec un modèle.
  2. directives structurelles-modification la disposition DOM en ajoutant et en supprimant des éléments DOM.
  3. directives D'attribut-modifie l'apparence ou le comportement d'un élément, 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 est les Directives sont des attributs qui ajoutent fonctionnalités de d'éléments de et composantes.

Regardez l'échantillon 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 étend les composants et les éléments HTML avec l'ajout d'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 le constructeur est appelé et rendu.

17
répondu Alireza 2018-05-16 00:04:45

Détection de changement

Seul @Component peut être un nœud dans 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 des propriétés @Input et @Output et vous pouvez injecter et manipuler ChangeDetectorRef du composant hôte. Utilisez donc des composants lorsque vous avez besoin d'un contrôle granulaire sur votre arbre de détection de changement.

4
répondu Evgeniy Malyutin 2018-03-30 04:51:16

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

Les Directives

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

Les Directives sont divisées en 3 catégories:

  • Attribut
  • Structurel
  • Composant

Oui, dans Angular 2, Les composants sont un type de Directive. Selon le Doc,

"angulaire les composants sont un sous-ensemble de directives. Contrairement aux directives, les composants ont toujours un modèle et un seul composant peut être instancié par un élément dans un modèle."

Les composants angulaires 2 sont une implémentation du concept Web Component . Composants Web se compose 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 sommaires, le mécanisme par que nous attachons comportement {[24] } aux éléments du DOM, consistant en, D'attributs et de types de Composants.
  • Les composants sont le type spécifique de directive qui nous permet de utiliser fonctionnalité du composant web AKA réutilisabilité - encapsulé, éléments réutilisables disponibles dans toute notre application.
1
répondu Sachila Ranawaka 2018-07-03 12:49:41