Ich habe gerade angefangen mit Angular 2 zu arbeiten.
Ich habe mich gefragt, was die Unterschiede zwischen Komponenten und Anweisungen in Angular 2 sind.
Ich habe gerade angefangen mit Angular 2 zu arbeiten.
Ich habe mich gefragt, was die Unterschiede zwischen Komponenten und Anweisungen in Angular 2 sind.
Antworten:
Grundsätzlich gibt es in Angular2 laut Dokumentation drei Arten von Direktiven.
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
@Component
Annotation integriert sind, wie folgt:Verwenden Sie diese Richtlinie aus Ihrer Sicht als:
Für die Komponentenrichtlinie habe ich hier das beste Tutorial gefunden.
Strukturrichtlinien
Like
*ngFor
und*ngIf
wird verwendet, um das DOM-Layout durch Hinzufügen und Entfernen von DOM-Elementen zu ändern. hier erklärtAttributanweisungen
Sie werden verwendet, um den vorhandenen Elementen durch Anwenden einiger Funktionen / Logik ein benutzerdefiniertes Verhalten oder einen benutzerdefinierten Stil zu verleihen. Like
ngStyle
ist 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
Wir können dies in der Ansicht wie unten gezeigt verwenden:
Für weitere Informationen können Sie das offizielle Tutorial hier und hier lesen
quelle
Komponenten haben ihre eigene Ansicht (HTML und Stile). Direktiven sind nur "Verhalten", das vorhandenen Elementen und Komponenten hinzugefügt wird.
Component
erstreckt sichDirective
.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*ngIf
bewirken, dass ein<template>
Tag implizit erstellt wird.quelle
Um das zu vervollständigen, was Günter gesagt hat, können wir zwei Arten von Richtlinien unterscheiden:
NgFor
undNgIf
. 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-syntaxHoffe es hilft dir, Thierry
quelle
Hier ist die eigentliche Definition.
Jede andere Definition ist falsch.
quelle
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:
*ngIf
die ein DOM-Element (oder eine Winkelkomponente, die ein benutzerdefiniertes DOM-Element, aber immer noch ein DOM-Element ist) einfügen oder entfernen kann.Beispiel:
Im obigen Beispiel können wir Folgendes beobachten:
AppComponent
hat eine Vorlage mit einem<div>
Element, das dort angezeigt wird.<div>
Element. Dies bedeutet, dass das Verhalten des<div>
Elements manipuliert wird . In diesem Fall wird der Text hervorgehoben und gelb.*ngIf
befindet sich ebenfalls auf dem<div>
Element und bestimmt, ob das Element eingefügt werden soll. Das<div>
wird bedingt angezeigt, je nachdem, ob der AusdruckmyBool
erzwungen werden kanntrue
.quelle
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
Strukturanweisungen: Ändern Sie das DOM-Layout, indem Sie DOM-Elemente hinzufügen und entfernen. Bsp.:
NgFor
UndNgIf
.Attributanweisungen: Ändern Sie das Erscheinungsbild oder Verhalten eines Elements, einer Komponente oder einer anderen Anweisung. Ex:
NgStyle
quelle
Eigentlich sind Komponenten auch Direktiven, haben aber Unterschiede zwischen ihnen.
Attributanweisungen sind Klassen, die das Verhalten oder Erscheinungsbild eines einzelnen Elements ändern können. Wenden Sie zum Erstellen einer Attributanweisung die
@Directive
auf eine Klasse an.Hinzufügen eines Direktivenattributs template.html File
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
*ngIf
oder 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.
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.
ngModel
B. 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.
vom offiziellen Winkel
aus dem Pro-Angular-Buch
quelle