webentwicklung-frage-antwort-db.com.de

@Directive v/s @Component in Angular

Was ist der Unterschied zwischen @Component und @Directive in Angular? Beide scheinen dieselbe Aufgabe zu erfüllen und haben die gleichen Attribute.

Was sind die Anwendungsfälle und wann sollten Sie einen bevorzugen?

321
Prasanjit Dey

A @Component erfordert eine Ansicht, eine @Directive jedoch nicht.

Richtlinien

Ich vergleiche eine @ Direktive mit einer Angular 1.0-Direktive mit der Option restrict: 'A' (Direktiven sind nicht auf die Verwendung von Attributen beschränkt.) Direktiven fügen einem vorhandenen DOM-Element oder einer vorhandenen Komponenteninstanz ein Verhalten hinzu. Ein Anwendungsfall für eine Direktive wäre beispielsweise das Protokollieren eines Klicks auf ein Element.

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

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

Was würde gerne so verwendet werden:

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

Komponenten

Anstatt eine Komponente hinzuzufügen/zu ändern, erstellt eine Komponente tatsächlich eine eigene Ansicht (Hierarchie von DOM-Elementen) mit angefügtem Verhalten. Ein Beispiel dafür ist eine Kontaktkartenkomponente:

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

Was würde gerne so verwendet werden:

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

ContactCard ist eine wiederverwendbare UI-Komponente, die wir überall in unserer Anwendung verwenden können, sogar innerhalb anderer Komponenten. Diese bilden im Wesentlichen die UI-Bausteine ​​unserer Anwendungen.

In Summe

Schreiben Sie eine Komponente, wenn Sie eine wiederverwendbare Gruppe von DOM-Elementen der Benutzeroberfläche mit benutzerdefiniertem Verhalten erstellen möchten. Schreiben Sie eine Anweisung, wenn Sie wiederverwendbares Verhalten schreiben möchten, um vorhandene DOM-Elemente zu ergänzen. 

Quellen:

424
jaker

Komponenten

  1. Um eine Komponente zu registrieren, verwenden wir @Component Metadaten-Annotation.
  2. Component ist eine Direktive, die Schatten-DOM verwendet, um gekapseltes visuelles Verhalten, so genannte Komponenten, zu erstellen. Komponenten werden normalerweise zum Erstellen von UI-Widgets verwendet.
  3. Komponente wird verwendet, um die Anwendung in kleinere Komponenten aufzuteilen.
  4. Pro DOM-Element kann nur eine Komponente vorhanden sein.
  5. @View decorator oder templateurl template sind obligatorisch in der Komponente.

Richtlinie

  1. Um Anweisungen zu registrieren, verwenden wir @Directive Metadaten-Annotation.
  2. Direktive wird verwendet, um einem vorhandenen DOM-Element ein Verhalten hinzuzufügen. 
  3. Richtlinie wird verwendet, um wiederverwendbare Komponenten zu entwerfen.
  4. Es können viele Anweisungen pro DOM-Element verwendet werden.
  5. Direktive verwendet View nicht.

Quellen:

http://www.codeandyou.com/2016/01/differenz-zwischen-komponenten-und-direktive-in-Angular2.html

64
virender

Eine Komponente ist eine Anweisung mit Vorlage, und der @Component-Dekorator ist eigentlich ein @Directive-Dekorator, der um vorlagenorientierte Funktionen erweitert wird.

48
yusuf tezel

In Winkel 2 und darüber ist "alles eine Komponente". Komponenten sind Die Hauptmethode, auf der wir Elemente und Logik auf der Seite erstellen und festlegen, ist durch benutzerdefinierte Elemente und Attribute, die die Funktionalität von .__ hinzufügen. unsere vorhandenen Komponenten.

http://learnangular2.com/components/

Aber welche Anweisungen haben dann Angular2 +?

Attributdirektiven hängen Verhalten an Elemente an.

In Angular gibt es drei Arten von Anweisungen:

  1. Komponenten - Anweisungen mit einer Vorlage.
  2. Strukturelle Richtlinien - ändern das DOM-Layout durch Hinzufügen und Entfernen von DOM-Elementen. 
  3. Attributanweisungen: Ändern Sie die Darstellung oder das Verhalten eines Elements Komponente oder eine andere Direktive.

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

Was also in Angular2 und höher passiert, sind Direktiven, Attribute, die Funktionen zu elements und components hinzufügen.

Sehen Sie sich das Beispiel von Angular.io an: 

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

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

Was es also macht, es erweitert Ihre Komponenten und HTML-Elemente um gelben Hintergrund und Sie können es wie folgt verwenden:

<p myHighlight>Highlight me!</p>

Komponenten erstellen jedoch vollständige Elemente mit allen Funktionen wie folgt:

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

und Sie können es wie folgt verwenden:

<my-component></my-component>

Wenn wir das Tag im HTML-Code verwenden, wird diese Komponente erstellt und der Konstruktor aufgerufen und gerendert.

20
Alireza

Erkennung ändern

Nur @Component kann ein Knoten im Änderungserkennungsbaum sein. Das bedeutet, dass Sie ChangeDetectionStrategy.OnPush nicht in @Directive setzen können. Trotz dieser Tatsache kann eine Direktive @Input- und @Output-Eigenschaften haben, und Sie können die ChangeDetectorRef-Komponente der Host-Komponente aus ihr einfügen und bearbeiten. Verwenden Sie daher Komponenten, wenn Sie eine detaillierte Kontrolle über den Änderungserkennungsbaum benötigen.

6

In einem Programmierkontext geben Anweisungen dem Compiler eine Anleitung, um zu ändern, wie er sonst Eingaben verarbeiten würde, d. H. Ein Verhalten ändern.

"Direktiven ermöglichen das Anhängen von Verhalten an Elemente im DOM."

richtlinien sind in 3 Kategorien unterteilt: 

  • Attribut 
  • Strukturelle 
  • Komponente

Ja, in Angular 2 handelt es sich bei Komponenten um eine Art Richtlinie.

„Winkelkomponenten sind eine Teilmenge von Anweisungen. Im Gegensatz zu Direktiven haben Komponenten immer eine Vorlage, und pro Element in einer Vorlage kann nur eine Komponente instanziiert werden. “

Angular 2 Components sind eine Implementierung des Web Component Konzepts. Webkomponenten bestehen aus mehreren separaten Technologien. Sie können sich Web-Komponenten als wiederverwendbare Benutzeroberflächen-Widgets vorstellen, die mithilfe der offenen Web-Technologie erstellt werden.

  • Also in zusammenfassenden Anweisungen Der Mechanismus, mit dem wir behavior an Elemente im DOM anhängen, die aus strukturellen, Attribut- und Komponententypen bestehen.
  • Komponenten sind die spezifische Art der Direktive, die es uns ermöglicht, die Funktionalität der Web-Komponenten AKA-Wiederverwendbarkeit -
3

Wenn Sie die offiziellen Winkeldokumente verweisen

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

In Angular gibt es drei Arten von Anweisungen:

  1. Komponenten - Anweisungen mit einer Vorlage.
  2. Strukturelle Richtlinien: Ändern Sie das DOM-Layout, indem Sie DOM-Elemente hinzufügen und entfernen. z.B. * ngIf
  3. Attributanweisungen: Ändern Sie das Erscheinungsbild oder das Verhalten eines Elements, einer Komponente oder einer anderen Direktive. z.B. [ngClass].

Wenn die Anwendung wächst, haben wir Schwierigkeiten, alle diese Codes zu verwalten. Zur Wiederverwendbarkeit trennen wir unsere Logik in intelligenten Komponenten und dummen Komponenten und verwenden Anweisungen (Struktur oder Attribute), um Änderungen im DOM vorzunehmen.

0
Akshay Rajput

Komponenten

Komponenten sind der grundlegendste UI-Baustein einer Angular App. Eine Angular App enthält einen Baum von Angular Komponenten. Unsere Anwendung in Angular basiert auf einem Komponentenbaum . Jede Komponente sollte über eine Vorlage, ein Styling, einen Lebenszyklus, einen Selektor usw. verfügen. Jede Komponente hat also ihre Struktur. Sie können sie als eigenständige kleine Komponente behandeln Webanwendung mit eigener Vorlage und Logik und der Möglichkeit zur Kommunikation und Verwendung mit anderen Komponenten.

Beispiel-TS-Datei für Komponente:

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

und deren Template-Ansicht ./app.component.html:

Hello {{title}}

Anschließend können Sie die AppTrainingComponent-Vorlage mit ihrer Logik in anderen Komponenten rendern (nachdem Sie sie dem Modul hinzugefügt haben).

<div>
   <app-training></app-training>
</div>

und das Ergebnis wird sein

<div>
   my-app-training
</div>

as AppTrainingComponent wurde hier gerendert

Siehe mehr über Komponenten

Direktiven

Die Direktive ändert das Aussehen oder Verhalten eines vorhandenen DOM-Elements. Zum Beispiel ist [ngStyle] eine Direktive. Direktiven können Komponenten erweitern (können in ihnen verwendet werden), aber sie erstellen keine ganze Anwendung . Nehmen wir an, sie unterstützen nur Komponenten. Sie haben keine eigene Vorlage (aber natürlich können Sie die Vorlage damit bearbeiten).

Beispielrichtlinie:

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

Und seine Verwendung:

<p [appHighlight]="color" [otherPar]="someValue">Highlight me!</p>

Siehe mehr zu Direktiven

0