Variables de modèle locales dans Angular avec @let

La syntaxe @let d’Angular est une nouvelle fonctionnalité permettant de créer des variables de modèle locales. Découvrez comment @let fonctionne et ce qu’il débloque pour nos modèles angulaires.

La syntaxe des modèles d’Angular a toujours été puissante, avec des fonctionnalités telles que @if, @for et @switch facilitant la création d’interfaces dynamiques et réactives (voir Notions de base d’Angular : contrôler le flux de vos modèles angulaires).

Bien que ces fonctionnalités de modèle soient polyvalentes, une limitation clé subsistait : l’incapacité de définir réutilisable variables dans le modèle. Entrez dans Angular Syntaxe @let: une nouvelle fonctionnalité permettant de créer des variables de modèle locales qui améliorent la clarté et la maintenabilité. Dans cet article, nous verrons comment @let fonctionne et ce qu’il débloque pour nos modèles angulaires.

Syntaxe du modèle angulaire

Les modèles angulaires ont toujours pris en charge les expressions JavaScript complexes, permettant aux développeurs de lier des données, d’interagir avec des observables à l’aide du | asynchrone pipe et afficher dynamiquement le contenu. Cependant, il n’existe historiquement aucun moyen simple de stocker le résultat d’une expression et de le réutiliser dans le même modèle.

Jetons un coup d’œil à un exemple simple :

<h1>{{ user.firstName }} {{ user.lastName }}</h1>
<p>Welcome, {{ user.firstName }}!</p>

Dans le code ci-dessus, user.firstName est évalué deux fois. Même si cela ne semble pas problématique pour les petits modèles, cette répétition pourrait entraîner des inefficacités et une réduction de la clarté du code lorsqu’il s’agit de modèles plus volumineux ou d’expressions coûteuses. Les développeurs contournaient souvent cette limitation en déplaçant la logique vers le composant ou en utilisant des directives pour définir des variables. Les deux approches ajoutent de la complexité et réduisent la séparation des préoccupations entre les modèles et les composants.

Présentation de @let

Le nouveau @let La syntaxe Angular résout ce problème en permettant aux développeurs de déclarer et de réutiliser des variables directement dans les modèles. La syntaxe ressemble à celle de JavaScript laisser syntaxe mais est spécifiquement conçu pour les modèles angulaires. Une variable déclarée avec @let est limité à la vue actuelle et à ses descendants, et sa valeur est automatiquement maintenue à jour par la détection des modifications d’Angular.

Avec @letl’exemple de modèle ci-dessus peut maintenant être révisé comme suit :

@let firstName = user.firstName;
<h1>{{ firstName }} {{ user.lastName }}</h1>
<p>Welcome, {{ firstName }}!</p>

Dans l’exemple ci-dessus, le @let la syntaxe déclare un firstName variable, qui contient la valeur du prénom de l’utilisateur. Le résultat est réutilisé dans le modèle sans recalculer l’expression.

Un cas d’utilisation courant pour @let travaille avec le | async tuyau. Auparavant, les développeurs utilisaient couramment *ngIf pour gérer les données asynchrones :

<div *ngIf="user$ | async as user">
  <h1>Hello, {{ user.name }}</h1>
</div>

Avec @letcela devient plus propre en réduisant l’imbrication et en améliorant la lisibilité.

@let user = user$ | async;
@if (user) {
  <h1>Hello, {{ user.name }}</h1>
}

L’introduction de @let dans les modèles angulaires apporte des avantages utiles tout en présentant quelques considérations. Il simplifie la logique du modèle en permettant aux développeurs de définir des variables directement dans le modèle, réduisant ainsi la redondance et améliorant la lisibilité. Cela le rend particulièrement utile pour gérer les conditions, les calculs et les données asynchrones, où les expressions répétitives compliquent le code.

Cependant, @let est parfois mieux adapté à une logique simple. Les composants ou les services partagés peuvent fournir une solution plus réutilisable et plus maintenable lorsqu’il s’agit de processus complexes ou en plusieurs étapes. Dans les scénarios sensibles aux performances, tels que les modèles ou les boucles profondément imbriqués, @let peut nécessiter un examen attentif, car des réévaluations fréquentes lors de la détection de changements peuvent avoir un impact sur l’efficacité.

De plus, parce que la logique définie avec @let reste lié au modèle spécifique, il lui manque la réutilisabilité offerte par les fonctions ou utilitaires partagés à travers composants (c’est-à-dire, vues parentales, frères et sœurs).

Dans l’ensemble, le @let syntax est une syntaxe complémentaire utile pour les modèles angulaires, offrant un moyen simple mais efficace de définir et de réutiliser des variables. En réduisant la redondance et en améliorant la lisibilité, il permet aux développeurs d’écrire un code plus propre et plus maintenable. Cependant, comme tout outil, il est important d’utiliser @let judicieusement et réservez-le aux scénarios où il simplifie vraiment le modèle.

Pour une lecture plus détaillée sur @letassurez-vous de consulter les ressources suivantes !