Quelle est la différence entre composant et directive?

Réponses:

105

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 un modèle, des styles et une partie logique qui est le type de directive le plus célèbre parmi tous dans Angular2. Dans ce type de directive, vous pouvez utiliser d'autres directives, qu'elles soient personnalisées ou intégrées dans l' @Componentannotation, comme suit:

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

Utilisez cette directive dans votre vue comme:

<my-app></my-app>

Pour la directive relative aux composants, j'ai trouvé le meilleur tutoriel ici.

Directives structurelles

Comme *ngForet *ngIf, utilisé pour changer la disposition DOM en ajoutant et en supprimant des éléments DOM. expliqué ici

Directives d'attribut

Ils sont utilisés pour donner un comportement ou un style personnalisé aux éléments existants en appliquant certaines fonctions / logique. Like ngStyleest une directive d'attribut pour donner du style dynamiquement 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 comme indiqué ci-dessous:

<span Icheck>HEllo Directive</span>

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

— Pardeep Jain
source
De quel type est la directive «routeur-sortie»? Il ne correspond à l'OMI aucun des trois types ci-dessus.
— user2516186
1
— Flames
64

Les composants ont leur propre vue (HTML et styles). Les directives ne sont que des "comportements" ajoutés aux éléments et composants existants.
Components'étend Directive.

Pour cette raison, il ne peut y avoir qu'un seul composant sur un élément hôte, mais plusieurs directives.

Les directives structurelles sont des directives appliquées aux <template>éléments et utilisées pour ajouter / supprimer du contenu (tamponner le modèle). Les *applications de directive in comme *ngIfprovoquent la <template>création implicite d' une balise.

— Günter Zöchbauer
source
7

Pour compléter ce que Günter a dit, nous pouvons distinguer deux types de directives:

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

— Thierry Templier
source
2
Ne voyez pas le but des directives d'attribut. Qu'offrent-ils au-delà du CSS?
— Tim McNamara
3
@TimMcNamara, les directives angulaires peuvent avoir une logique / des méthodes, vous pouvez donc faire plus avec une directive attribut que vous ne pouvez avec juste CSS. Vous pouvez transmettre une valeur de propriété parent dans une directive d'attribut et faire apparaître l'élément ou se comporter différemment en fonction de cette valeur de propriété.
— Mark Rajcok
Vous pouvez trouver un bon exemple ici: angular.io/docs/ts/latest/guide/attribute-directives.html
— Joris Brauns
6

Voici la définition réelle.

  • S'il a un modèle , c'est un composant
  • sinon si elle a un sélecteur entre crochets "[comme ça]", c'est une directive d'attribut
  • sinon, c'est une directive structurelle .

Toute autre définition est fausse.

— John Henckel
source
3

Sommaire:

Un composant est une directive avec une vue associée (c'est-à-dire du HTML à rendre). 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 : peuvent être attachées aux éléments DOM (et aux composants car ce sont des éléments DOM) pour modifier l'apparence ou le comportement d'un élément.
  • Directives structurelles : peuvent être attachées aux éléments DOM (et aux composants car ce sont des éléments DOM) pour modifier la disposition DOM. Les directives structurelles commencent par un * et ajoutent ou suppriment en fait un élément DOM. Par exemple, *ngIfqui peut insérer ou supprimer un élément DOM (ou un composant angulaire 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 AppComponenta un modèle avec un <div>élément qui s'affiche, bonjour.
  • La directive d'attribut HighlightDirective se trouve sur l' <div>élément. Cela signifie qu'il manipulera le comportement de l' <div>élément. Dans ce cas, il mettra en évidence le texte et le deviendra jaune.
  • La directive structurelle *ngIfest également située sur l' <div>élément et déterminera si l'élément doit être inséré. Le <div>sera affiché conditionnellement selon que l'expression myBoolpeut être forcée ou non true.
— Willem van der Veen
source
2

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

Une application angulaire 2 est constituée de composants. Un composant est la combinaison d'un modèle HTML et d'une classe de composant (classe A typescript) qui contrôle une partie de l'écran.

Pour la bonne pratique, 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 toute votre application à l'aide du nom de sélecteur fourni.

Le composant est également une sorte de directive avec un modèle.

Les deux autres directives sont

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

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

— Malatesh Patil
source
0

En fait, les composants sont également des directives, mais présentent des différences entre eux.

Directives d'attribut :

Les directives d'attribut sont des classes capables de 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 fichier template.html d'attribut de directive

<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 mise en page du document HTML en ajoutant et en supprimant des éléments, sous forme de micro-modèles. Les directives structurelles permettent d'ajouter du contenu de manière conditionnelle en fonction du résultat d'une expression telle que *ngIfou pour que le même contenu soit répété pour chaque objet dans une source de données telle 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 leurs propres modèles, plutôt que de s'appuyer sur du contenu fourni d'ailleurs. Les composants ont accès à toutes les fonctionnalités de directive, ont toujours un élément hôte, peuvent toujours définir des propriétés d'entrée et de sortie, etc., mais ils définissent également leur propre contenu.

Il peut être facile de sous-estimer l'importance du modèle, mais les directives attributaires et structurelles ont des limites. Les directives peuvent faire un travail utile et puissant, mais elles n'ont pas beaucoup d'informations sur les éléments auxquels elles sont appliquées. Les directives sont plus utiles lorsqu'il s'agit d'outils à usage général, comme la ngModeldirective, qui peut être appliquée à n'importe quelle propriété de modèle de données et à n'importe quel élément de formulaire, sans égard à 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 qui sont appliquées aux éléments HTML du modèle, qui fournissent le contexte utilisé pour évaluer les expressions de liaison de données et agissent comme le lien entre les directives et le reste de l'application. Les composants sont également un outil utile pour permettre à de grands projets angulaires d'être divisés en morceaux 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 l'angulaire officiel

du livre Pro-Angular

— fgul
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.