Angular Academy · Lektion

Abhängigkeiten direkt importieren

Fügen Sie Imports zu einer Component statt zu einem Modul hinzu.

Abhängigkeiten direkt importieren ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Abhängigkeiten direkt importieren

Eine Standalone Component deklariert in ihrem eigenen imports-Array, was sie verwendet. Damit wird die Aufteilung in Deklarationen und Imports von NgModules ersetzt.

Das imports-Array

Fügen Sie dem imports-Array des @Component-Decorators weitere Standalone Components, Direktiven und Pipes hinzu.

import { Component } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  imports: [ChildComponent],
  template: '<app-child></app-child>'
})
export class ParentComponent {}

Andere Komponenten importieren

Um eine untergeordnete Komponente in Ihrem Template zu rendern, importieren Sie deren Klasse. Anschließend kann ihr Selector verwendet werden.

Direktiven importieren

Standalone-Direktiven werden auf dieselbe Weise importiert. Nach dem Import können Sie sie im Template anwenden.

import { Component } from '@angular/core';
import { HighlightDirective } from './highlight.directive';

@Component({
  selector: 'app-note',
  imports: [HighlightDirective],
  template: '<p appHighlight>Note</p>'
})
export class NoteComponent {}

Pipes importieren

Auch Standalone Pipes gehören in das imports-Array. Wenn Sie beispielsweise eine benutzerdefinierte Pipe importieren, können Sie sie in einer Interpolation verwenden.

Häufig verwendete Angular-Direktiven

Einige integrierte Helfer stammen aus Paketen. RouterLink kommt beispielsweise aus @angular/router und muss importiert werden, bevor Sie es verwenden können.

import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-nav',
  imports: [RouterLink],
  template: '<a routerLink="/home">Home</a>'
})
export class NavComponent {}

FormsModule und ähnliche Module

Sie können auch bestehende NgModules in eine Standalone Component importieren. Der Import von FormsModule aktiviert Funktionen für templategesteuerte Formulare wie ngModel.

import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-form',
  imports: [FormsModule],
  template: '<input [(ngModel)]="name">'
})
export class FormComponent {
  name = '';
}

Integrierter Control Flow benötigt keinen Import

Die integrierten Control-Flow-Blöcke (if, for, switch, defer) gehören selbst zur Template-Sprache und benötigen daher keinen Import. Das unterscheidet sie von den älteren strukturellen Direktiven.

Importieren Sie nur, was Sie verwenden

Halten Sie Imports schlank: Führen Sie nur die Abhängigkeiten auf, auf die das Template tatsächlich verweist. So bleiben Komponenten schlank und tree-shake-fähig.

Mehrere Elemente importieren

Das imports-Array kann viele Elemente gemeinsam aufführen.

imports: [ChildComponent, HighlightDirective, RouterLink, FormsModule]

Compilerfehler helfen Ihnen weiter

Wenn Sie einen nicht importierten Selector oder eine nicht importierte Pipe verwenden, meldet Angular einen eindeutigen Fehler, dass dieser in der Komponente unbekannt ist. Fügen Sie das betreffende Element zu imports hinzu, um den Fehler zu beheben.

Kurztest: Imports

Wo werden die Abhängigkeiten von Standalone Components angegeben?

Zusammenfassung: Direkte Imports

Standalone Components führen ihre Abhängigkeiten im imports-Array der Komponente auf: andere Komponenten, Direktiven, Pipes und sogar NgModules wie FormsModule. Integrierter Control Flow benötigt keinen Import. Halten Sie Imports schlank. Als Nächstes bootstrappen Sie eine Standalone-App.

Häufig gestellte Fragen

Ist die Lektion „Abhängigkeiten direkt importieren“ kostenlos?

Ja — der vollständige Text von „Abhängigkeiten direkt importieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Abhängigkeiten direkt importieren“?

Fügen Sie Imports zu einer Component statt zu einem Modul hinzu. Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Abhängigkeiten direkt importieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy