Angular - 2.18 Liaison de données bidirectionnelle

Dans les dernières vidéos, nous avons beaucoup appris sur la liaison d'événements et la liaison de propriétés. Maintenant, nous allons combiner les deux pour obtenir une liaison bidirectionnelle. Nous avons appris que nous pouvons obtenir les données d'un événement de cette manière, mais il existe aussi une autre approche.

Si je copie ceci et que je le commente et que je remplace cet événement input par quelque chose d'autre, vous verrez que nous avons un moyen encore plus facile de nous lier à certaines données. Avec la liaison de données bidirectionnelle, nous combinons la liaison de propriétés et d'événements. Nous l'utilisons donc en combinant les syntaxes, entre crochets, et à l'intérieur de ces parenthèses.

Maintenant, ici, nous devons utiliser une directive spéciale, et nous en apprendrons davantage sur les directives NgModel dans un instant. Maintenant, nous pouvons définir cet égal à une propriété définie dans notre code TypeScript. Par exemple, le serverName. Cette configuration fera ce qui suit. Elle va se déclencher sur l'événement input et mettra à jour la valeur du serverName dans notre composant automatiquement.

D'autre part, puisqu'il s'agit d'une liaison bidirectionnelle, il va également mettre à jour la valeur de l'élément input si nous changeons le serverName quelque part ailleurs. Et je peux le démontrer, en retournant au code TypeScript et en fixant le serverName au serveur de test ici initialement. C'était une chaîne vide, maintenant ce n'est plus le cas.

Avec cela, si nous retournons à l'application en cours d'exécution, vous voyez que l'input est pré-remplie avec ça. Maintenant, si à des fins de démonstration, je commente dans l'autre input qui n'utilise pas de liaison bidirectionnelle, vous voyez que cette input est vide car encore une fois il n'utilise pas de liaison bidirectionnelle.

Maintenant, si je tape quelque chose ici, vous voyez qu'il met à jour le nom de la propriété et donc il le met à jour ici où nous utilisons la chaîne d'interpolation, et dans l'autre input. Mais si je tape ici, il ne sera pas modifié dans le premier input parce que, encore une fois, nous n'utilisons pas la liaison bidirectionnelle ici.

C'est ce qu'est la liaison de données bidirectionnelle, un moyen très simple de liaison dans les deux sens et par exemple, de réagir aux changements de la valeur de d'entrée ici. Je vais donc commenter la première approche. Je vais laisser la méthode même si nous ne l'appelons plus. Mais avec cela, vous avez maintenant un aperçu de la liaison bidirectionnelle, un moyen simple et efficace de réagir aux événements dans les deux sens.

Maintenant affinons un peu plus notre application ici et passons ensuite aux directives, une autre fonctionnalité essentielle d'Angular.