Motivation
Mit Angular 14 hat das neue Konzept der eigenständigen Komponenten Einzug in das Angular-Ökosystem gehalten. Mit Hilfe dieses neuen Ansatzes ist die Erstellung von Angular-Komponenten jetzt einfacher als je zuvor.
Eigenständige Komponenten müssen in keine der NgModule-Dateien von Angular aufgenommen werden. Daher verhindern sie, dass Module aufgebläht werden, insbesondere beim Erstellen größerer Anwendungen.
Das Erstellen solcher Komponenten ist ziemlich einfach: Im @Component-Dekorator muss die boolesche Eigenschaft standalone aktiviert werden. Das ist es im Allgemeinen.
Darüber hinaus können Standalone-Komponenten auch in andere Standalone-Komponenten importiert werden.
Code-Example
@Component({
standalone: true,
selector: 'user-profile',
imports: [UserImageComponent]
})
export class UserProfileComponent {
// component logic
}Dies funktioniert nicht nur für eigenständige Komponenten, sondern auch für nicht eigenständige Komponenten, Direktiven oder Pipes. Das Importieren einer nicht eigenständigen Komponente in eine eigenständige Komponente funktioniert also, indem sie in das umgebende NgModule exportiert und das Modul anschließend in die Komponente importiert wird.
Wenn ein Entwickler beispielsweise eine im CalendarModule deklarierte CalendarComponent importieren möchte, kann dies wie folgt erreicht werden:
@Component({
standalone: true,
selector: 'user-profile',
imports: [CalendarModule],
template: `
...
`
})
export class UserProfileComponent {
// component logic
}Die beiden Codebeispiele sind lediglich Demonstrationsmaterial ohne jegliche Geschäftslogik. Dennoch zeigen sie gut, wie einfach es ist, eigenständige Komponenten mit älteren Komponenten vor v14 zu kombinieren.
Natürlich gibt es noch viel mehr zu lernen, aber der Kürze halber werden in diesem Artikel nur die wichtigsten Konzepte gezeigt. Wenn Sie mehr über Standalone-Komponenten erfahren möchten, insbesondere wie sie mit Routing verwendet werden, besuchen Sie die offizielle Angular-Dokumentation hier.
