Opérateur de navigation sécurisée - chaînage en option (JS et angulaire)
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.
![](https://miro.medium.com/v2/resize:fit:700/1*YU3l7uqVSUv-FA4LlslH0Q.png)
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
![](https://miro.medium.com/v2/resize:fit:700/1*kRAiuLQ1wdIqNXg5d9Cygw.png)
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.
![](https://miro.medium.com/v2/resize:fit:700/1*FiPpL6Oli9ifxDFKlfSWBg.png)
Lorsque vous exécutez la ng build
commande, vous pouvez trouver le code JavaScript compilé dans le main.js
fichier situé dans le dist
dossier.
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 ngIf
pour 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
![](https://miro.medium.com/v2/resize:fit:700/1*DbcyWY4Zg2jQZn2NUELBAA.png)
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 .