Einführung

Mit der Einführung von Angular 18.1 führt diese Version eine aufregende neue Funktion für den Compiler ein: die Möglichkeit, eine oder mehrere Vorlagenvariablen zu deklarieren.
Wie wird diese Funktion genutzt und welche unterschiedlichen Anwendungsfälle gibt es?

Dieser Artikel soll eine Antwort geben.

Die neueste Funktion des Compilers: @let

Mit den neuesten Versionen von Angular hat das Team neue Funktionen in den Compiler eingeführt, und diese Funktionalität wird in die @-Syntax übersetzt.

So entstand die neue Kontrollflusssyntax

• @Wenn
• @für
• @schalten

und neuerdings @let

Im Allgemeinen war der einfachste Weg, eine Vorlagenvariable zu erstellen, die Verwendung von

• die Strukturanweisung *ngIf mit dem Schlüsselwort as Stichwort

oder unter Verwendung der neuen Kontrollflusssyntax

• @if mit dem Schlüsselwort as

  {{ user.name }}



@if(user$ |async; as user){
  
{{ user.name }}
}

Diese praktische Funktion ermöglichte es uns, das Ergebnis der asynchronen Pipe in einer Variablen zur späteren Verwendung in der Vorlage zu speichern.

Diese Syntax wirft jedoch einige Fragen auf. Hier prüft die Bedingung, ob die Rückgabe der asynchronen Pipe wahr ist und ob sich der Rückgabewert daher von jedem Wert unterscheidet, der in Javascript als falsch gilt.

Diese Bedingung funktioniert sehr gut, wenn die Rückgabe ein Objekt oder ein Array ist.

aber wenn die Rückgabe eine Zahl und insbesondere die Zahl 0 ist

@if(((numbers$ |async) !=== undefined || (numbers$ |async) !=== null) ; as myNumber){
  
{{ myNumber }}
}

Hier kommt @let ins Spiel.

@let prüft keine Bedingung, sondern ermöglicht Ihnen lediglich die einfache Deklaration einer lokalen Vorlagenvariablen

Damit das obige Codebeispiel viel einfacher und eleganter zu schreiben ist

@let myNumber = (numbers$ | async) ?? 0;
{{ myNumber }}

Auf diese Weise wird die Variable myNumber immer angezeigt.

Die verschiedenen Arten der Verwendung von @let

Eines der klassischsten Szenarios bei der Variablendeklaration ist das Speichern des Ergebnisses eines komplexen Ausdrucks.

Es war schon immer nicht ratsam, eine Funktion in einer Bedingung zu verwenden. Die Verwendung einer Funktion in einer Bedingung hatte Auswirkungen auf die Leistung in dem Sinne, dass die Funktion bei der kleinsten Mausbewegung oder Änderung in der Vorlage neu bewertet wurde.

@let wertet, wie oben beschrieben, keine lokale Variable aus, sondern deklariert sie lediglich. Diese Variable wird nur dann neu ausgewertet, wenn sich eine ihrer Abhängigkeiten ändert. Daher ist der Aufruf einer Funktion für Ausdrücke wie komplexe Ausdrücke keine schlechte Idee.

@for(user of users(); track user.id) { @let isAdmin = checkIfAdmin(user);
• User is admin: {{ isAdmin }}
}

Verwenden Sie @let mit Signalen

@let ist mit Signalen kompatibel und wird wie folgt verwendet

@let userColor = user().preferences?.colors?.primaryColor || 'white';
user favorite color is {{ userColor }}

@let und Javascript-Ausdruck

Wie Sie sehen, kann @let verwendet werden, um jede Art von Javascript-Ausdruck auszuwerten, außer beispielsweise der Instanziierung einer Klasse

Auf diese Weise werden arithmetische Operatoren interpretiert und mehrere Variablen können auf mehreren verschiedenen Zeilen oder nur auf einer Zeile deklariert werden.

  
    @for (score of scores(); track $index) {
        @let total = total   score, max = calcMax(score);
        
final score: {{ total }}
    }

Andere coole Dinge, die @let mitbringt

Wie oben beschrieben, ist das Verhalten von @let dem Verhalten von let in Javascript sehr ähnlich, was die folgenden Vorteile hat

• Der Bereich funktioniert wie der let-Bereich in Javascript
• bessere Tippfehler in der Vorlage
• Es wird ein Fehler ausgelöst, wenn eine Variable (let) vor der Deklaration verwendet wird