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 ist eine Direktive mit einer Vorlage, und der @ComponentDekorateur ist tatsächlich ein @DirectiveDekorator, der um vorlagenorientierte Funktionen erweitert wurde - Quelle .
Cosmin Ababei
2
Direktive vs Komponente ist der neue Service vs Factory. Die Verwirrung nimmt auch zu, weil Sie, wenn Sie tatsächlich andere Komponenten aus einer Komponentendefinition benötigen, diese im directivesArray angeben ... Vielleicht hilft der Kommentar von Lida Weng unten ein wenig zu verdeutlichen, dass die Komponente "es sich tatsächlich um eine erweiterte 'Richtlinie' handelt"
Nobita
1
Komponenten erweitern tatsächlich die Direktive, sie erfordern lediglich eine Vorlage (HTML) im Gegensatz zu Direktiven. Sie würden also die Direktive verwenden, um das vorhandene HTML-Element zu ändern, und die Komponente erstellt HTML-Elemente
Marko Niciforovic,
Antworten:
545
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.
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:
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.
Hat @directive Annotation die Eigenschaft template / templateUrl?
Pardeep Jain
7
Ist diese Antwort noch wahr? Das Angular2-Tutorial selbst erstellt eine Komponente ohne Ansicht
Tamas Hegedus
Es ist ohne Ansicht, aber Templateurl oder Template sind in der Komponente obligatorisch
Luca Trazzi
4
Ich mag diese Art von Antworten, würde mich aber über ein Update sehr freuen, wenn entscheidende Änderungen am Framework vorgenommen werden.
Memet Olsen
Dies muss ein wenig geändert werden. Die Winkel-2-API hat sich geändert. Es gibt keinen View Decorator mehr.
DaSch
79
Komponenten
Um eine Komponente zu registrieren, verwenden wir eine @ComponentMetadatenanmerkung.
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.
Die Komponente wird verwendet, um die Anwendung in kleinere Komponenten aufzuteilen.
Pro DOM-Element kann nur eine Komponente vorhanden sein.
@View Dekorator oder Templateurl-Vorlage sind in der Komponente obligatorisch.
Richtlinie
Um Direktiven zu registrieren, verwenden wir die @DirectiveAnnotation von Metadaten.
Die Direktive wird verwendet, um einem vorhandenen DOM-Element Verhalten hinzuzufügen.
Die Richtlinie dient zum Entwerfen wiederverwendbarer Komponenten.
Pro DOM-Element können viele Direktiven verwendet werden.
Komponenten - Punkt 4. Ich denke, es ist falsch - es kann mehrfach verwendet werden. Es ist eigentlich eine erweiterte "Richtlinie"
Lida Weng
Könnte dies mit Beispielen erweitert haben.
Mukus
Es ist nicht immer Shadow Dom. Hängt von der Ansichtskapselung ab
Anirudha
63
Eine Komponente ist eine Direktive mit einer Vorlage, und der @ComponentDekorateur ist tatsächlich ein @DirectiveDekorator, der um vorlagenorientierte Funktionen erweitert wurde.
Ich bin mir nicht sicher, warum du zu viel herabgestimmt hast. Es scheint, dass @Component eine Richtlinie mit einer Vorlage (zum Generieren einer Ansicht) für mich ist.
Harry Ninh
22
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.
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:
Komponenten - Anweisungen mit einer Vorlage.
Strukturanweisungen: Ändern Sie das DOM-Layout, indem Sie DOM-Elemente hinzufügen und entfernen. zB * ngIf
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 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).
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).
@Component
Dekorateur ist tatsächlich ein@Directive
Dekorator, der um vorlagenorientierte Funktionen erweitert wurde - Quelle .directives
Array angeben ... Vielleicht hilft der Kommentar von Lida Weng unten ein wenig zu verdeutlichen, dass die Komponente "es sich tatsächlich um eine erweiterte 'Richtlinie' handelt"Antworten:
Eine @ -Komponente erfordert eine Ansicht, eine @Directive nicht.
Richtlinien
Ich vergleiche ein @Directive mit einer Angular 1.0-Direktive mit der Option(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.restrict: 'A'
Welches würde so verwendet werden:
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:
Welches würde so verwendet werden:
ContactCard
ist 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:
quelle
Komponenten
@Component
Metadatenanmerkung.@View
Dekorator oder Templateurl-Vorlage sind in der Komponente obligatorisch.Richtlinie
@Directive
Annotation von Metadaten.Quellen:
http://www.codeandyou.com/2016/01/difference-between-component-and-directive-in-Angular2.html
quelle
Eine Komponente ist eine Direktive mit einer Vorlage, und der
@Component
Dekorateur ist tatsächlich ein@Directive
Dekorator, der um vorlagenorientierte Funktionen erweitert wurde.quelle
http://learnangular2.com/components/
Aber was machen Direktiven dann in Angular2 +?
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:
Was es also tut, erweitert es Ihre Komponenten und HTML-Elemente um einen gelben Hintergrund und Sie können es wie folgt verwenden:
Mit Komponenten werden jedoch vollständige Elemente mit allen folgenden Funktionen erstellt:
und Sie können es wie folgt verwenden:
Wenn wir das Tag im HTML verwenden, wird diese Komponente erstellt und der Konstruktor wird aufgerufen und gerendert.
quelle
Änderungserkennung
Nur
@Component
kann ein Knoten im Änderungserkennungsbaum sein. Dies bedeutet, dass Sie nichtChangeDetectionStrategy.OnPush
in a setzen können@Directive
. Trotz dieser Tatsache kann eine Richtlinie haben@Input
und@Output
Eigenschaften und Sie können injizieren und Host - Komponente manipulierenChangeDetectorRef
von ihm. Verwenden Sie daher Komponenten, wenn Sie eine detaillierte Kontrolle über Ihren Änderungserkennungsbaum benötigen.quelle
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.
Richtlinien sind in 3 Kategorien unterteilt:
Ja, in Winkel 2 sind Komponenten eine Art Richtlinie. Laut dem Doc,
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.
quelle
Wenn Sie sich auf die offiziellen eckigen Dokumente beziehen
In Angular gibt es drei Arten von Anweisungen:
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.
quelle
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:
und die Vorlagenansicht ./app.component.html:
Anschließend können Sie die AppTrainingComponent-Vorlage mit ihrer Logik in anderen Komponenten rendern (nachdem Sie sie dem Modul hinzugefügt haben).
und das Ergebnis wird sein
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:
Und seine Verwendung:
Weitere Informationen zu Richtlinien
quelle