@Directive vs @Component in Angular: Was ist der Unterschied und was sollte ein Anfänger 2024 wählen?

Warum diese Frage Stack Overflow (und Ihr Gehirn) sprengt?

Sie schreiben Ihr erstes Angular-Projekt. Sie erstellen eine Komponente, hängen den Dekorator @Component daran – alles funktioniert. Dann sehen Sie in fremdem Code @Directive und denken: „Warum? Das ist doch dasselbe?“. Spoiler: Nein, es ist nicht dasselbe. Aber Verwirrung entsteht bei 90% der Anfänger.

Die Frage „@Directive vs @Component in Angular“ hat auf Stack Overflow tausende Aufrufe nicht ohne Grund. Lassen Sie uns ein für alle Mal klären, worin der Unterschied besteht, wann man was verwendet und wie man sich im Vorstellungsgespräch nicht blamiert. Los geht's!

Was ist @Component? (Spoiler: Es ist auch @Directive)

Zunächst – die Enthüllung. @Component ist ein Untertyp von @Directive. Ja, Sie haben richtig gehört. Jede Komponente in Angular ist eine Direktive. Aber mit einem wichtigen Unterschied: Eine Komponente hat eine Vorlage (template).

Der Dekorator @Component erbt alles von @Directive und fügt seine eigene „Besonderheit“ hinzu – die Möglichkeit, HTML zu rendern. Wenn eine Direktive ein „Verhalten“ ist, dann ist eine Komponente „Verhalten + ein Stück Benutzeroberfläche“.

Beispiel einer einfachen Komponente in TypeScript

import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-hello',\n  template: `<h1>Hallo, {{name}}!</h1>`,\n  styles: ['h1 { color: blue; }']\n})\nexport class HelloComponent {\n  name: string = 'Welt';\n}\n

Hier ist HelloComponent eine vollwertige Komponente. Sie hat ihre eigene Vorlage, Styles und Logik. Sie kann in einer anderen Vorlage als <app-hello></app-hello> verwendet werden.

Was ist @Directive? (Reines Verhalten)

Eine Direktive ist eine Klasse mit dem Dekorator @Directive, die das Verhalten oder Aussehen eines bestehenden DOM-Elements ändert. Eine Direktive hat keine eigene Vorlage. Sie erzeugt kein neues Element – sie „hängt“ sich an ein bereits vorhandenes.

In Angular gibt es drei Arten von Direktiven:

\n
• Komponenten (ja, sie sind auch Direktiven) – mit Vorlage.
\n
• Strukturelle Direktiven – ändern die DOM-Struktur (*ngIf, *ngFor).
\n
• Attributdirektiven – ändern das Aussehen oder Verhalten eines Elements (ngClass, ngStyle).
\n

Beispiel einer Attributdirektive in TypeScript

import { Directive, ElementRef, HostListener } from '@angular/core';\n\n@Directive({\n  selector: '[appHighlight]'\n})\nexport class HighlightDirective {\n  constructor(private el: ElementRef) {}\n\n  @HostListener('mouseenter') onMouseEnter() {\n    this.el.nativeElement.style.backgroundColor = 'yellow';\n  }\n\n  @HostListener('mouseleave') onMouseLeave() {\n    this.el.nativeElement.style.backgroundColor = null;\n  }\n}\n

Diese Direktive hebt das Element bei Mausbewegung gelb hervor. Sie erzeugt keinen neuen DOM-Knoten – sie „verändert“ einen bestehenden. Verwendet wird sie so: <div appHighlight>Beweg die Maus über mich</div>.

Wesentliche Unterschiede @Directive vs @Component

Lassen Sie es uns Schritt für Schritt aufschlüsseln. Hier ist eine Tabelle, die Ihnen hilft, den Unterschied ein für alle Mal zu merken:

Eigenschaft	@Component	@Directive
Vorhandensein einer Vorlage (template)	✅ Ja, erforderlich	❌ Nein
Erzeugt ein neues DOM-Element	✅ Ja (über den Selektor)	❌ Nein (wird auf ein bestehendes angewendet)
Vorhandensein von Styles (styles)	✅ Ja, können isoliert werden	❌ Blogs Wie man als PHP-Entwickler eingestellt wird: Tipps und Lebenslauf für Anfänger Algorithmen und Datenstrukturen in TypeScript: Ein vollständiger Leitfaden Mikroservices in JavaScript: Architektur und fortgeschrittene Praxis Buchempfehlungen JavaScript (Node.js)-Vorstellungsgespräch: 200 Fragen und Antworten Gute Praktiken zum Schreiben von Bibliotheken in Rust Docker für PHP-Entwickler Domain-Driven Design in PHP Lesen Sie auch Java-Internationalisierung: Mehrsprachige Anwendungen erstellen Beste IDEs und Tools für die Java-Entwicklung im Jahr 2024 Go + KI: Wie neuronale Netze die Codegenerierung in Projekten beschleunigen WebSocket in JavaScript: Echtzeitanwendungen von A bis Z So wählen Sie ein Element in der Angular-Komponentenvorlage aus: Vollständige Anleitung mit TypeScript 🍪 Сначала примите условия Чтобы войти на сайт, необходимо принять соглашение об использовании файлов cookie. Мы используем их для авторизации и улучшения работы сайта. Политика конфиденциальности Принять и продолжить Закрыть 🍪 Мы используем файлы cookie для авторизации, аналитики и улучшения работы сайта. Продолжая пользоваться сайтом, вы соглашаетесь с нашей политикой конфиденциальности. Принять Только необходимые