web-dev-qa-db-fra.com

Quelle est la difference entre composant et directive?

Je viens de commencer à travailler avec Angular 2.

Je me demandais quelles sont les différences entre les composants et les directives dans Angular 2?

angularcomponentsdirective
70
uksz

Fondamentalement, il existe trois types de directives dans Angular2 selon la documentation.

  • Composant
  • Directives structurelles
  • Directives d'attribut

Composant

C'est aussi un type de directive avec modèle, styles et partie logique qui est le type de directive le plus connu parmi tous dans Angular2. Dans ce type de directive, vous pouvez utiliser d'autres directives, qu'elles soient personnalisées ou intégrées à l'annotation @Component, comme suit:

@Component({
    selector: "my-app"
    directives: [custom_directive_here]
})

Utilisez cette directive dans votre vue comme:

<my-app></my-app>

Pour la directive de composant, j'ai trouvé le meilleur tutoriel ici.

Directives structurelles

Comme *ngFor et *ngIf, ils permettent de modifier la disposition du DOM en ajoutant et en supprimant des éléments DOM. expliqué ici

Directives d'attribut

Ils sont utilisés pour attribuer un comportement ou un style personnalisé aux éléments existants en appliquant certaines fonctions/logiques. Like ngStyle est une directive attributaire permettant de donner un style dynamique 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 d'une directive simple:

Premièrement, nous devons importer la directive de @angular/core

import {Directive, ElementRef, Renderer, Input} from '@angular/core';

@Directive({
  selector: '[Icheck]',
})
export class RadioCheckbox {
   // custom logic here...
}

Nous pouvons l'utiliser dans la vue ci-dessous:

<span Icheck>HEllo Directive</span>

Pour plus d'informations, vous pouvez lire le tutoriel officiel ici et ici

88
Pardeep Jain

Les composants ont leur propre vue (HTML et styles). Les directives ne sont que du "comportement" ajouté aux éléments et composants existants.
Component étend Directive.

De ce fait, il ne peut y avoir qu'un seul composant sur un élément Host, mais plusieurs directives.

Les directives structurelles sont des directives appliquées aux éléments <template> et utilisées pour ajouter/supprimer du contenu (marquer le modèle). Le * dans les applications de directive telles que *ngIf provoque la création implicite d'une balise <template>.

58
Günter Zöchbauer

Pour compléter les propos de Günter, nous pouvons distinguer deux types de directives:

  • Les structurels qui mettent à jour la disposition du DOM en ajoutant ou en supprimant des éléments. Les deux communes sont NgFor et NgIf. 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
  • Les ceux d'attribut qui mettent à jour le comportement de l'apparence de l'élément auquel ils sont attachés.

J'espère que ça vous aide, Thierry

7
Thierry Templier

Angular 2 suit le modèle d'architecture composant/service.

Une angular 2 Application est composée de composants. Un composant est la combinaison d'un modèle HTML et d'une classe de composants (classe A TypeScript) qui contrôle une partie de l'écran.

Pour les bonnes pratiques, la classe de composant est utilisée pour la liaison de données à la vue respective. La liaison de données bidirectionnelle est une fonctionnalité intéressante fournie par le framework angular.

Les composants sont réutilisables dans votre application à l'aide du nom de sélecteur fourni.

Le composant est aussi une sorte de directive avec un template.

Deux autres directives sont

  1. Directives structurelles: modifiez la disposition du DOM en ajoutant et en supprimant des éléments DOM. Ex: NgFor et NgIf.

  2. Directives d'attributs: modifiez l'apparence ou le comportement d'un élément, d'un composant ou d'une autre directive. Ex: NgStyle

2
Malatesh Patil

Voici la définition actuelle.

  • S'il a un modèle , il s'agit d'un composant
  • sinon, si elle a un sélecteur entre crochets "[likethis]", il s’agit d’un directive sur les attributs
  • sinon c'est un directive structurelle.

Toute autre définition est fausse.

2
John Henckel

Sommaire:

Un composant est une directive avec une vue associée (c'est-à-dire que HTML doit être rendu). Tous les composants sont des directives, mais toutes les directives ne sont pas des composants. Il existe trois types de directives:

  • composant: une vue avec un comportement associé. Ce type de directive ajoute en fait des éléments DOM
  • Directives d'attribut: Peut être attaché à des éléments DOM (et à des composants puisqu'il s'agit d'éléments DOM) pour modifier l'apparence ou le comportement d'un élément.
  • Directives structurelles: Peut être attaché à des éléments DOM (et à des composants puisqu'il s'agit d'éléments DOM) pour modifier la présentation du DOM. Les directives structurelles commencent par un * et ajoutent ou suppriment effectivement un élément DOM. Par exemple, *ngIf qui peut insérer ou supprimer un élément DOM (ou un composant angular qui est un élément DOM personnalisé, mais toujours un élément DOM).

Exemple:

import { Component, HostListener, HostBinding, Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
 }
}

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf='myBool' appHighlight>Hi there</div>
  `,
  styleUrls: ['./app.component.scss'],
})
export class AppComponent  {

  myBool:boolean = true;

}

Dans l'exemple ci-dessus, nous pouvons observer ce qui suit:

  • Le composant AppComponent a un modèle avec un élément <div> qui affiche, hi ici.
  • La directive d'attribut HighlightDirective est située sur l'élément <div>. Cela signifie qu'il va manipuler le comportement de l'élément <div>. Dans ce cas, le texte sera surligné et deviendra jaune.
  • La directive structurelle *ngIf est également située sur l'élément <div> et déterminera si l'élément doit être inséré. Le <div> sera affiché conditionnellement selon que l'expression myBool peut être contrainte à true.
1
Willem van der Veen

En réalité, les composants sont aussi des directives, mais présentent des différences entre elles.

Directives d'attribut :

Les directives d'attribut sont des classes pouvant modifier le comportement ou l'apparence d'un seul élément. Pour créer une directive d'attribut, appliquez le @Directive à une classe.

import { Directive, ElementRef } from "@angular/core";

@Directive({
     selector: "[custom-attr]", })

export class CustomAttrDirective {

   constructor(element: ElementRef) {
      element.nativeElement.classList.add("bg-success", "text-white");    
   } 
}

Ajout d'un attribut de directive template.html Fichier

<tr *ngFor="let item of getProducts(); let i = index" custom-attr>
   <td>{{i + 1}}</td>
   <td>{{item.name}}</td>
</tr>

Directives structurelles :

Les directives structurelles modifient la présentation du document HTML en ajoutant et en supprimant des éléments, sous forme de micro-modèles. Les directives structurelles permettent l’ajout conditionnel de contenu basé sur le résultat d’une expression telle que*ngIf ou la répétition du même contenu pour chaque objet d’une source de données tel que *ngFor.

Vous pouvez utiliser les directives intégrées pour les tâches courantes, mais l'écriture de directives structurelles personnalisées permet d'adapter le comportement à votre application.

<p *ngIf="true">
  Expression is true and ngIf is true.
  This paragraph is in the DOM.
</p>
<p *ngIf="false">
  Expression is false and ngIf is false.
  This paragraph is not in the DOM.
</p>

Composants :

Les composants sont des directives qui ont leurs propres modèles, plutôt que de s'appuyer sur du contenu fourni ailleurs. Les composants ont accès à toutes les fonctionnalités de directive, ont toujours un élément Host, peuvent toujours définir les propriétés d'entrée et de sortie, etc., mais ils définissent également leur propre contenu.

Il est facile de sous-estimer l'importance du modèle, mais les directives d'attribut et de structure ont des limites. Les directives peuvent faire un travail utile et puissant, mais elles n’ont pas une idée précise des éléments auxquels elles sont appliquées. Les directives sont particulièrement utiles lorsqu'elles sont des outils généraux, tels que la directive ngModel, qui peut être appliquée à toute propriété de modèle de données et à tout élément de formulaire, sans tenir compte de l'utilisation des données ou de l'élément.

Les composants, en revanche, sont étroitement liés au contenu de leurs modèles. Les composants fournissent les données et la logique qui seront utilisées par les liaisons de données appliquées aux éléments HTML du modèle, qui fournissent le contexte utilisé pour évaluer les expressions de liaison de données et servent de lien entre les directives et le reste de l'application. Les composants sont également un outil utile car ils permettent de scinder les grands projets Angular en plusieurs parties gérables. 

import { Component, Input } from '@angular/core';

import { Hero } from './hero';

@Component({
  selector: 'app-hero-child',
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
  `
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

de angular officiel

extrait du livre Pro-Angular

0
fgul