@let: Neuer Feature-Compiler in Angular 1

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

• @if
• @für
• @switch

und neuerdings auch @let

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

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

oder unter Verwendung der neuen Kontrollflusssyntax

• @if mit dem Schlüsselwort as

<!-- older control flow syntax -->
<div *ngIf="user$ |async as user">
  {{ user.name }}
</div>

<!-- new control flow syntax -->
@if(user$ |async; as user){
  <div>{{ user.name }}</div>
}

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 ist und insbesondere die Zahl 0

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

Hier kommt @let ins Spiel.

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

so dass das obige Codebeispiel viel einfacher und eleganter zu schreiben ist

@let myNumber = (numbers$ | async) ?? 0;
<div>{{ myNumber }}</div>

Auf diese Weise wird die Variable myNumber immer angezeigt.

Die verschiedenen Arten der Verwendung von @let

Eines der klassischsten Szenarios mit 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 bei der kleinsten Mausbewegung oder Änderung in der Vorlage die Funktion neu bewertet wurde.

@let führt, wie oben beschrieben, keine Auswertung aus, sondern deklariert lediglich eine lokale Variable. 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.

<ul>
  @for(user of users(); track user.id) {
    @let isAdmin = checkIfAdmin(user);
   <li>User is admin: {{ isAdmin }}</li>
  }
</ul>

Verwenden Sie @let mit Signalen

@let ist mit Signalen kompatibel und wird wie folgt verwendet

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

@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 in mehreren verschiedenen Zeilen oder nur in einer Zeile deklariert werden.

<div>  
    @for (score of scores(); track $index) {
        @let total = total + score, max = calcMax(score);
        <h1>final score: {{ total }}</h1>
    }
</div>

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) verwendet wird, bevor sie deklariert wird

Das obige ist der detaillierte Inhalt von@let: Neuer Feature-Compiler in Angular 1. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!