@Directive v/s @Component in Angular

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

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

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.

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.

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 -

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.

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