Opérateur de navigation sécurisée - chaînage en option (JS et angulaire)

L’ opérateur de navigation sécurisée , également connu sous le nom de chaînage facultatif en JavaScript, est une fonctionnalité qui nous permet d’accéder en toute sécurité aux propriétés ou aux fonctions d’un objet sans générer d’erreur si l’une des propriétés de la chaîne est nulle ( nullou undefined).

L’ opérateur de navigation sécurisée a été introduit dans ECMAScript 2020 (ES2020) et est pris en charge par la plupart des navigateurs modernes.

Pour utiliser l’ opérateur safe navigator , il vous suffit d’ajouter (?.)après l’objet et avant la propriété ou la fonction nécessaire.

Opérateur de navigation sécuritaire

Opérateur de navigation sécurisée avec Angular

Bien sûr, dans une application Angular, nous pouvons utiliser l’ opérateur de navigation sécurisée avec TypeScript, et nous avons la possibilité de l’utiliser avec des expressions de modèle pour gérer les valeurs nulles ou indéfinies. Voici un exemple

Opérateur de navigation sécurisée dans un modèle angulaire

L’ opérateur de navigation sécurisée est implémenté dans le compilateur Angular, dans notre exemple, le compilateur Angular traduira l’expression en une expression JavaScript équivalente en utilisant l’opérateur ternaire pour vérifier les valeurs nulles ou indéfinies.

Code généré par Angular Compiler

Lorsque vous exécutez la ng buildcommande, vous pouvez trouver le code JavaScript compilé dans le main.jsfichier situé dans le distdossier.

ng build --développement de la configuration

Et vous pouvez trouver le code JavaScript compilé pour l’ opérateur de navigation sécurisée.

Dans notre cas, il s’agit du code généré par le compilateur :

_angular_core__WEBPACK_IMPORTED_MODULE_1__[ "ɵɵtextInterpolate1" ]( " " , 
ctx. user == null ? null : ctx. user . address == null ? null :
ctx. user . address . city , "" );

Parce qu’il est important de s’assurer que votre code est concis, efficace et facile à lire. Il est recommandé d’utiliser l’ opérateur de navigation sécurisée ( ?.) au lieu de s’appuyer sur ngIfpour vérifier si un objet est nul ou indéfini.

un opérateur de navigation sûr peut simplifier votre code, le rendre plus robuste et réduire le risque d’erreurs

Si vous avez des questions ou des commentaires, faites-le moi savoir dans les commentaires ci-dessous.

Pour en savoir plus sur Angular, JS et Java, vous pouvez me suivre sur Medium ou Twitter .

 

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *