Angular verbesserte Vorlagensyntax und optimierte Migrationen

Angular 18.2 ist da und obwohl es sich möglicherweise um eine Nebenversion handelt, enthält es einige wertvolle Verbesserungen, die das Entwicklererlebnis verbessern. Dieser Artikel befasst sich intensiv mit diesen spannenden Funktionen und konzentriert sich dabei auf die verfeinerte @let-Syntax und die Einführung neuer Migrationsschemata.

@let Verbessert

Die @let-Syntax, ein persönlicher Favorit vieler Angular-Entwickler, wird in 18.2 weiterentwickelt. Es bietet zwei unterschiedliche Ansätze zum Definieren von Vorlagenvariablen, die Ihrem Code mehr Flexibilität und Lesbarkeit verleihen:

Dynamisches @let: Nutzen Sie die Möglichkeit, Vorlagenreferenzvariablen in @for- und @if-Anweisungen zu verwenden. Stellen Sie sich vor, Sie könnten innerhalb der Vorlage mühelos auf den Wert eines Formulars zugreifen:

<input #myForm name="my-from" [maxlength]="maxLength" />
@let formValue = myForm.value

Async @let: In früheren Versionen war für den Zugriff auf den neuesten von einem Observablen ausgegebenen Wert eine ngIf-Direktive erforderlich.

@if ({ tasks:  tasks$ | async }; as taskData) {

//shows the @if block before the 1st tasks$ emit
 @for (task of taskData.tasks; track task.id) {
    [...]
  } @empty {
    No Tasks pending.
  }
}

Erzielen Sie jetzt das gleiche Ergebnis mit weniger Linien und verbesserter Klarheit

@let tasks = tasks$ | async;
@for (task of tasks; track task.id) {
  [...]
}
@empty {
  No Tasks pending.
}

Denken Sie daran, dass @let-Variablen schreibgeschützt sind und nicht neu zugewiesen werden können. Ihre Werte werden jedoch bei jedem Änderungserkennungszyklus automatisch aktualisiert. Obwohl die Verwendung derselben Namen innerhalb der Vorlage und der Klassenkomponente technisch möglich ist, müssen die langfristigen Auswirkungen dieser Praxis weiter untersucht werden.

Migration leicht gemacht: Neue Pläne in der Stadt

Beginnend mit Angular 17 sind wir auf drei primäre Migrationsschemata gestoßen:

• Kontrollfluss der Vorlagensyntax: ng g @angular/core:control-flow
• Neuer App-Builder: ng update @angular/cli --name use-application-builder
• Eigenständige Komponenten: ng g @angular/core:standalone

Angular 18.2 erweitert dieses Toolkit um noch weitere hilfreiche Tools:

• Eigenständige Komponentenroutenkonvertierung: Erstellen Sie mit ng g @angular/core:route-lazy-loading ganz einfach Lazy-Loading-Routen aus eigenständigen Komponenten.
• DI-Migration: Vereinfachen Sie den Übergang von der konstruktorbasierten Abhängigkeitsinjektion zum neuen funktionalen inject()-Ansatz mit ng g @angular/core:inject-migration.

Fazit und Ausblick

Angular 18.2 ist zwar eine Nebenversion, bietet aber erhebliche Verbesserungen für diejenigen, die gerne mit @let arbeiten und optimierte Migrationsprozesse schätzen. Während wir gespannt auf die wichtigsten Funktionen warten, die für Angular 19 im November 2024 geplant sind, verspricht Version 18.3, die in den nächsten sechs Wochen erscheint, ein weiterer spannender Schritt zu werden. Bleiben Sie also ruhig, programmieren Sie weiter und nutzen Sie die Fortschritte in Angular!

Das obige ist der detaillierte Inhalt vonAngular verbesserte Vorlagensyntax und optimierte Migrationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!