@Directive vs @Component in Angular

Was ist der Unterschied zwischen @Componentund @Directivein Angular? Beide scheinen die gleiche Aufgabe zu erledigen und haben die gleichen Eigenschaften.

Was sind die Anwendungsfälle und wann sollten Sie einander vorziehen?

Eine @ -Komponente erfordert eine Ansicht, eine @Directive nicht.

Richtlinien

Ich vergleiche ein @Directive mit einer Angular 1.0-Direktive mit der Optionrestrict: 'A' (Direktiven sind nicht auf die Verwendung von Attributen beschränkt.) Direktiven fügen einem vorhandenen DOM-Element oder einer vorhandenen Komponenteninstanz Verhalten hinzu. Ein Beispiel für einen Anwendungsfall für eine Direktive wäre 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!'); }
}

Welches würde so verwendet werden:

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

Komponenten

Anstatt Komponenten hinzuzufügen / zu ändern, erstellt eine Komponente tatsächlich eine eigene Ansicht (Hierarchie von DOM-Elementen) mit angehängtem Verhalten. Ein Beispiel für einen Anwendungsfall hierfür könnte eine Kontaktkartenkomponente sein:

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

Welches würde so verwendet werden:

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

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

Zusammenfassend

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

Quellen:

• @Direktive Dokumentation
• @ Komponentendokumentation
• Hilfreicher Blogbeitrag

Komponenten

1. Um eine Komponente zu registrieren, verwenden wir eine @ComponentMetadatenanmerkung.
2. Component ist eine Direktive, die Schatten-DOM verwendet, um ein gekapseltes visuelles Verhalten zu erstellen, das als Komponenten bezeichnet wird. Komponenten werden normalerweise zum Erstellen von UI-Widgets verwendet.
3. Die Komponente wird verwendet, um die Anwendung in kleinere Komponenten aufzuteilen.
4. Pro DOM-Element kann nur eine Komponente vorhanden sein.
5. @View Dekorator oder Templateurl-Vorlage sind in der Komponente obligatorisch.

Richtlinie

1. Um Direktiven zu registrieren, verwenden wir die @DirectiveAnnotation von Metadaten.
2. Die Direktive wird verwendet, um einem vorhandenen DOM-Element Verhalten hinzuzufügen.
3. Die Richtlinie dient zum Entwerfen wiederverwendbarer Komponenten.
4. Pro DOM-Element können viele Direktiven verwendet werden.
5. Die Direktive verwendet View nicht.

Quellen:

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

Eine Komponente ist eine Direktive mit einer Vorlage, und der @ComponentDekorateur ist tatsächlich ein @DirectiveDekorator, der um vorlagenorientierte Funktionen erweitert wurde.

In Winkel 2 und höher ist „alles eine Komponente“. Komponenten sind die Hauptmethode, mit der wir Elemente und Logik auf der Seite erstellen und angeben, und zwar sowohl über benutzerdefinierte Elemente als auch über Attribute, die unseren vorhandenen Komponenten Funktionen hinzufügen.

http://learnangular2.com/components/

Aber was machen Direktiven dann in Angular2 +?

Attributanweisungen hängen das Verhalten an Elemente an.

In Angular gibt es drei Arten von Anweisungen:

1. Komponenten - Anweisungen mit einer Vorlage.
2. Strukturanweisungen: Ändern Sie das DOM-Layout, indem Sie DOM-Elemente hinzufügen und entfernen.
3. Attributanweisungen: Ändern Sie das Erscheinungsbild oder Verhalten eines Elements, einer Komponente oder einer anderen Anweisung.

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

In Angular2 und höher sind Direktiven Attribute, die Elementen und Komponenten Funktionen hinzufügen .

Schauen Sie sich das folgende 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 tut, erweitert es Ihre Komponenten und HTML-Elemente um einen gelben Hintergrund und Sie können es wie folgt verwenden:

<p myHighlight>Highlight me!</p>

Mit Komponenten werden jedoch vollständige Elemente mit allen folgenden Funktionen erstellt:

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 verwenden, wird diese Komponente erstellt und der Konstruktor wird aufgerufen und gerendert.

Änderungserkennung

Nur @Componentkann ein Knoten im Änderungserkennungsbaum sein. Dies bedeutet, dass Sie nicht ChangeDetectionStrategy.OnPushin a setzen können @Directive. Trotz dieser Tatsache kann eine Richtlinie haben @Inputund @OutputEigenschaften und Sie können injizieren und Host - Komponente manipulieren ChangeDetectorRefvon ihm. Verwenden Sie daher Komponenten, wenn Sie eine detaillierte Kontrolle über Ihren Änderungserkennungsbaum benötigen.

In einem Programmierkontext bieten Direktiven dem Compiler eine Anleitung, um zu ändern, wie er sonst Eingaben verarbeiten würde, dh um ein bestimmtes Verhalten zu ändern.

"Mit Direktiven können Sie Elementen im DOM Verhalten hinzufügen."

Richtlinien sind in 3 Kategorien unterteilt:

• Attribut
• Strukturell
• Komponente

Ja, in Winkel 2 sind Komponenten eine Art Richtlinie. Laut dem Doc,

„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-Komponenten sind eine Implementierung des Webkomponenten- Konzepts. Webkomponenten bestehen aus mehreren separaten Technologien. Sie können sich Webkomponenten als wiederverwendbare Benutzeroberflächen-Widgets vorstellen, die mithilfe der offenen Webtechnologie erstellt werden.

• Also in zusammenfassenden Anweisungen Der Mechanismus, mit dem wir Elementen im DOM Verhalten hinzufügen, bestehend aus Struktur-, Attribut- und Komponententypen.
• Komponenten sind die spezifische Art von Direktiven, mit denen wir die Funktionalität von Webkomponenten nutzen können. AKA-Wiederverwendbarkeit - gekapselte, wiederverwendbare Elemente, die in unserer gesamten Anwendung verfügbar sind.

Wenn Sie sich auf die offiziellen eckigen Dokumente beziehen

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

In Angular gibt es drei Arten von Anweisungen:

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

Wenn die Anwendung wächst, haben wir Schwierigkeiten, alle diese Codes zu verwalten. Aus Gründen der Wiederverwendbarkeit trennen wir unsere Logik in intelligente und dumme Komponenten und verwenden Anweisungen (strukturell oder Attribut), um Änderungen im DOM vorzunehmen.

Komponenten

Komponenten sind der grundlegendste Baustein der Benutzeroberfläche einer Angular-App. Eine Angular-App enthält einen Baum von Angular-Komponenten. Unsere Anwendung in Angular basiert auf einem Komponentenbaum . Jede Komponente sollte ihre Vorlage, ihr Design, ihren Lebenszyklus, ihren Selektor usw. haben. Jede Komponente hat also ihre Struktur. Sie können sie als eigenständige kleine Webanwendung mit eigener Vorlage und Logik behandeln und die Möglichkeit haben, mit anderen zu kommunizieren und zusammen verwendet zu werden 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 die Vorlagenansicht ./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>

als AppTrainingComponent wurde hier gerendert

Weitere Informationen zu Komponenten

Richtlinien

Die Richtlinie ändert das Erscheinungsbild 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 mit ihnen 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>

Weitere Informationen zu Richtlinien