Ich habe gerade angefangen mit Angular 2 zu arbeiten.

Ich habe mich gefragt, was die Unterschiede zwischen Komponenten und Anweisungen in Angular 2 sind.

Grundsätzlich gibt es in Angular2 laut Dokumentation drei Arten von Direktiven.

• Komponente
• Strukturrichtlinien
• Attributanweisungen

Komponente

Es ist auch eine Art von Direktive mit Vorlage, Stilen und logischem Teil, die unter Angular2 die bekannteste Art von Direktive ist. In dieser Art von Direktive können Sie andere Direktiven verwenden, unabhängig davon, ob sie benutzerdefiniert oder in die @ComponentAnnotation integriert sind, wie folgt:

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

Verwenden Sie diese Richtlinie aus Ihrer Sicht als:

<my-app></my-app>

Für die Komponentenrichtlinie habe ich hier das beste Tutorial gefunden.

Strukturrichtlinien

Like *ngForund *ngIfwird verwendet, um das DOM-Layout durch Hinzufügen und Entfernen von DOM-Elementen zu ändern. hier erklärt

Attributanweisungen

Sie werden verwendet, um den vorhandenen Elementen durch Anwenden einiger Funktionen / Logik ein benutzerdefiniertes Verhalten oder einen benutzerdefinierten Stil zu verleihen. Like ngStyleist eine Attributanweisung, um den Elementen einen dynamischen Stil zu verleihen. Wir können unsere eigene Direktive erstellen und diese als Attribut einiger vordefinierter oder benutzerdefinierter Elemente verwenden. Hier ist das Beispiel einer einfachen Direktive:

Zunächst müssen wir die Direktive aus importieren @angular/core

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

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

Wir können dies in der Ansicht wie unten gezeigt verwenden:

<span Icheck>HEllo Directive</span>

Für weitere Informationen können Sie das offizielle Tutorial hier und hier lesen

Komponenten haben ihre eigene Ansicht (HTML und Stile). Direktiven sind nur "Verhalten", das vorhandenen Elementen und Komponenten hinzugefügt wird.
Componenterstreckt sich Directive.

Aus diesem Grund kann ein Hostelement nur eine Komponente enthalten, jedoch mehrere Anweisungen.

Strukturanweisungen sind Anweisungen, die auf <template>Elemente angewendet werden und zum Hinzufügen / Entfernen von Inhalten (Stempeln der Vorlage) verwendet werden. Die *In-Direktive-Anwendungen wie *ngIfbewirken, dass ein <template>Tag implizit erstellt wird.

Um das zu vervollständigen, was Günter gesagt hat, können wir zwei Arten von Richtlinien unterscheiden:

• Die strukturellen, die das DOM-Layout durch Hinzufügen oder Entfernen von Elementen aktualisieren. Die beiden häufigsten sind NgForund NgIf. Diese sind mit dem Vorlagenkonzept verknüpft und müssen mit einem vorangestellt werden *. Weitere Informationen finden Sie im Abschnitt "Vorlagen und *" in diesem Link: http://victorsavkin.com/post/119943127151/angular-2-template-syntax
• Die Attribute, die das Verhalten des Erscheinungsbilds des Elements aktualisieren, an das sie angehängt sind.

Hoffe es hilft dir, Thierry

Hier ist die eigentliche Definition.

• Wenn es eine hat Vorlage hat , ist es eine Komponente
• sonst wenn es eine hat Andernfalls handelt es sich um eine Attributrichtlinie, in Klammern "[likethis]" Selektor steht
• sonst ist es ein Strukturrichtlinie .

Jede andere Definition ist falsch.

Zusammenfassung:

Eine Komponente ist eine Direktive mit einer zugeordneten Ansicht (dh zu renderndes HTML). Alle Komponenten sind Anweisungen, aber nicht alle Anweisungen sind Komponenten. Es gibt drei Arten von Richtlinien:

• Komponente : Eine Ansicht mit zugehörigem Verhalten. Diese Art von Direktive fügt tatsächlich DOM-Elemente hinzu
• Attributanweisungen : Kann an DOM-Elemente (und Komponenten, da diese DOM-Elemente sind) angehängt werden, um das Erscheinungsbild oder Verhalten eines Elements zu ändern.
• Strukturanweisungen : Kann an DOM-Elemente (und Komponenten, da diese DOM-Elemente sind) angehängt werden, um das DOM-Layout zu ändern. Strukturanweisungen beginnen mit einem * und fügen tatsächlich ein DOM-Element hinzu oder entfernen es. Zum Beispiel, *ngIfdie ein DOM-Element (oder eine Winkelkomponente, die ein benutzerdefiniertes DOM-Element, aber immer noch ein DOM-Element ist) einfügen oder entfernen kann.

Beispiel:

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;

}

Im obigen Beispiel können wir Folgendes beobachten:

• Die Komponente AppComponenthat eine Vorlage mit einem <div>Element, das dort angezeigt wird.
• Die Attributanweisung HighlightDirective befindet sich im <div>Element. Dies bedeutet, dass das Verhalten des <div>Elements manipuliert wird . In diesem Fall wird der Text hervorgehoben und gelb.
• Die Strukturanweisung *ngIfbefindet sich ebenfalls auf dem <div>Element und bestimmt, ob das Element eingefügt werden soll. Das <div>wird bedingt angezeigt, je nachdem, ob der Ausdruck myBoolerzwungen werden kann true.

Winkel 2 folgt dem Komponenten- / Servicemodell der Architektur.

Eine eckige 2 Anwendung besteht aus Bauteilen. Eine Komponente ist die Kombination einer HTML-Vorlage und einer Komponentenklasse (eine Typoskriptklasse), die einen Teil des Bildschirms steuert.

Für die bewährte Methode wird die Komponentenklasse für die Datenbindung an die jeweilige Ansicht verwendet. Die bidirektionale Datenbindung ist ein großartiges Merkmal des Winkelgerüsts.

Komponenten können in Ihrer Anwendung unter Verwendung des angegebenen Selektornamens wiederverwendet werden.

Komponente ist auch eine Art Direktive mit einer Vorlage.

Weitere zwei Richtlinien sind

1. Strukturanweisungen: Ändern Sie das DOM-Layout, indem Sie DOM-Elemente hinzufügen und entfernen. Bsp.: NgForUnd NgIf.

2. Attributanweisungen: Ändern Sie das Erscheinungsbild oder Verhalten eines Elements, einer Komponente oder einer anderen Anweisung. Ex: NgStyle

Eigentlich sind Komponenten auch Direktiven, haben aber Unterschiede zwischen ihnen.

Attributanweisungen :

Attributanweisungen sind Klassen, die das Verhalten oder Erscheinungsbild eines einzelnen Elements ändern können. Wenden Sie zum Erstellen einer Attributanweisung die @Directiveauf eine Klasse an.

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

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

export class CustomAttrDirective {

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

Hinzufügen eines Direktivenattributs template.html File

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

Strukturrichtlinien :

Strukturanweisungen ändern das Layout des HTML-Dokuments, indem sie Elemente als Mikrovorlagen hinzufügen und entfernen. Strukturanweisungen ermöglichen das bedingte Hinzufügen von Inhalten basierend auf dem Ergebnis eines Ausdrucks wie *ngIfoder für die Wiederholung desselben Inhalts für jedes Objekt in einer Datenquelle wie z *ngFor.

Sie können die integrierten Anweisungen für allgemeine Aufgaben verwenden. Durch das Schreiben benutzerdefinierter struktureller Anweisungen können Sie das Verhalten jedoch an Ihre Anwendung anpassen.

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

Komponenten :

Komponenten sind Anweisungen, die ihre eigenen Vorlagen enthalten, anstatt sich auf Inhalte zu verlassen, die von anderen Stellen bereitgestellt werden. Komponenten haben Zugriff auf alle Direktivenfunktionen, verfügen weiterhin über ein Hostelement, können weiterhin Eingabe- und Ausgabeeigenschaften definieren usw. Sie definieren jedoch auch ihren eigenen Inhalt.

Es kann leicht sein, die Bedeutung der Vorlage zu unterschätzen, aber Attribut- und Strukturanweisungen haben Einschränkungen. Richtlinien können nützliche und leistungsstarke Arbeit leisten, haben jedoch nicht viel Einblick in die Elemente, auf die sie angewendet werden. Direktiven sind am nützlichsten, wenn es sich um Allzweckwerkzeuge handelt, z. ngModelB. die Direktive, die auf jede Datenmodelleigenschaft und jedes Formularelement angewendet werden kann, unabhängig davon, wofür die Daten oder das Element verwendet werden.

Im Gegensatz dazu sind Komponenten eng mit dem Inhalt ihrer Vorlagen verbunden. Komponenten stellen die Daten und die Logik bereit, die von den Datenbindungen verwendet werden, die auf die HTML-Elemente in der Vorlage angewendet werden. Diese stellen den Kontext bereit, der zum Auswerten von Datenbindungsausdrücken verwendet wird, und dienen als Bindeglied zwischen den Anweisungen und dem Rest der Anwendung. Komponenten sind auch ein nützliches Werkzeug, um große Angular-Projekte in überschaubare Teile aufzuteilen.

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

vom offiziellen Winkel

aus dem Pro-Angular-Buch