Maintenant que vous avez mouillé vos pieds avec des observables angulaires dans l'exercice précédent,
vous regardez en arrière et dites,
« Oh observables ne sont pas si mauvais après tout,
ils sont assez simples à utiliser. »
Donc, nous sommes un peu plus ambitieux.
Allons un peu plus loin, puis faisons usage d'un observable intégré dans Angular.
Les params observables qui proviennent de
le service de route activé dans notre module routeur.
Nous allons maintenant mettre à jour le composant de détail de plat,
pour utiliser les paramètres observables de
le service de sécheresse activateur à
prendre en charge de nouvelles fonctionnalités dans notre application Angular.
Avant de passer à la mise à jour du composant Dish detail,
Je veux introduire une autre méthode dans mon fichier Dish service.ts.
Alors ouvrez le fichier vaisselle service.ts et ensuite nous allons ajouter une nouvelle méthode appelée
getDishids et cela va fondamentalement
retourner tous les ID de plat est pour tous les plats de notre collection de plats.
Donc, pour ce faire, nous allons utiliser un retour
et de méthode et avant que je ne le fasse,
cela renvoie un observable.
De quel genre ?
Ceci renvoie un observable qui se compose d'un tableau de chaîne
et retardons
de 2 000 millisecondes ou deux secondes.
Alors, qu'est-ce que nous voulons revenir ?
Nous voulons prendre le tableau de vaisselle,
extraire tous les ID du tableau de vaisselle et
puis le donner à notre composant Dish Detail,
parce que nous avons besoin de cela dans notre composant Dish Detail pour implémenter
la nouvelle fonctionnalité que nous allons soutenir dans notre application.
Maintenant, c'est une façon dont je veux l'implémenter.
Plus tard, nous pouvons voir comment nous pouvons le faire d'une bien meilleure façon,
dans l'un des exercices ultérieurs.
Pour le moment, avec la façon dont le service est implémenté,
c'est le mieux que je pourrais faire pour implémenter cette solution pour démontrer une nouvelle fonctionnalité.
Donc, dans l'observable,
ce que je vais faire est,
je vais prendre le tableau de plats et le tableau de plats.
Je vais utiliser la carte,
un opérateur de tableau, la carte de l'opérateur de tableau JavaScript.
Donc, l'opérateur de carte,
comment cela fonctionne est qu'il prend chaque élément du tableau de vaisselle et nous pouvons mapper
cet élément dans un autre élément, puis construire
un autre tableau, puis retourner ce tableau modifié.
Donc, pour chaque élément dans mon tableau de plats,
, je vais prendre cet élément et puis à la place
extraire l'ID du plat, puis de l'ID du plat.
Donc, je finirai par en construire un nouveau tableau,
qui ne contient que les ID,
donc un tableau d'ID et nous voyons déjà que les ID sont une chaîne,
c'est ce que je vais retourner de mon ID plat ici.
C'est tout, l'opérateur de tableau de carte.
Si vous recherchez les opérateurs de tableau JavaScript,
vous verrez ce que fait l'opérateur de tableau de carte.
En effet, l'opérateur de tableau de carte est également
intéressant du point de vue des observables,
parce qu'un observable comme vous l'avez vu,
peut également être considéré comme un tableau,
un flux de valeurs,
qui peut être considéré comme un tableau.
Ainsi, l'opérateur de carte peut également être utilisé dans les observables.
Mais en ce moment, je l'utilise simplement comme un opérateur de tableau JavaScript.
Sauvegardons les modifications.
Maintenant, nous allons aller au composant Dish detail, puis mettre à jour le composant Dish detail.
Maintenant, dans le composant Dish detail,
avec le Dish,
je vais déclarer une variable appelée Dishids,
qui est un tableau de chaîne.
Ce Dishids va stocker tous les ID de
tous les plats qui sont dans ma collection de plats dans mon menu.
Ensuite, j'aurai aussi
deux autres variables appelées précédent et suivant de la chaîne de type.
Maintenant, pourquoi ai-je besoin de ça ?
Cela deviendra un peu plus clair,
une fois que vous implémentez la vue,
où je vais utiliser cela.
Maintenant, ce que je vais faire ici est que,
à l'intérieur de mon NGInit plus tôt,
nous avons laissé id est égal à plus cet ID de params route.snapshot.
Quand j'ai fait cela dans l'exercice précédent,
Je ne vous ai pas expliqué ce que faisait l'instantané et pourquoi nous le faisons de cette façon ?
Parce que vous deviez comprendre les observables,
avant de comprendre ce que signifie l'instantané.
Maintenant, dans Angular, le service d'itinéraire activé fournit un ensemble d'observables.
Un des observables est appelé un params.
Ce que ce params nous fournit,
est un moyen d'obtenir les valeurs des paramètres dans mon URL.
Donc, vous avez vu que lorsque vous introduisez les paramètres de route,
vous avez introduit l'un des paramètres de route comme ID deux-points.
Cet ID deux-points devient disponible en tant qu'observable.
Donc, chaque fois que cette valeur change,
, vous pouvez observer les changements dans cette valeur, puis agir en conséquence.
Mais, plus tôt lorsque nous avons implémenté le composant de détail de plat,
, nous ne connaissons pas les observables.
Donc, je ne pouvais pas expliquer ce que faisait l'instantané à ce moment-là.
Maintenant, laissez-moi revenir en arrière et expliquer exactement ce que fait l'instantané.
Lorsque nous utilisons ceci comme instantané ici,
ce que nous faisons est,
nous prenons un instantané de
le service de route et ensuite nous obtenons
le paramètre observable à ce moment particulier.
La valeur des paramètres à ce point particulier du temps
, puis en faisant usage dans notre application.
Bien que ce n'est pas la façon idéale de le faire.
Au lieu de cela, nous allons donc utiliser l'observable
directement et ensuite répondre chaque fois que cet observable change.
Alors, comment mettre à jour ce code pour utiliser directement l'observable ?
Donc, ce que nous réalisons est que depuis le service de route activé,
nous avons les paramètres observables à notre disposition.
Donc, nous allons utiliser les params observables et
chaque fois qu'il y a un changement dans l'endroit où params observables,
nous pouvons initier un changement dans notre composant DishDetail.
Permettez-moi de vous illustrer comment nous allons utiliser
les paramètres observables en mettant à jour ce code.
Donc, en allant à ce code,
ce que je vais faire maintenant,
c'est que je vais changer cela en disant,
« J'ai cette route et à partir de cette route,
j'ai déjà les paramètres disponibles. »
Donc, je vais supprimer l'instantané et j'utilise les paramètres.
Donc, avec ce params,
ce que j'ai maintenant est l'accès aux params observables.
Maintenant, puisque nous avons ce params observable,
Je vais utiliser un opérateur sur ce params observable et ensuite le modifier.
Donc, l'opérateur que je vais utiliser est appelé opérateur SwitchMap.
L'opérateur SwitchMap me permet de
faire usage des paramètres observables et vous voyez la ligne rouge squiggly qui signifie,
que j'ai besoin d'importer le SwitchMap observable ici.
Donc, je vais entrer dans
mes entrées ici et
puis je vais entrer rxjs et opérateur.
Donc, à partir des params observables,
je reçois des params qui sont du type Params.
Alors, rappelez-vous que nous avons importé les paramètres de la bibliothèque de routeur ici.
Donc, nous avons imploré de params ici,
de la bibliothèque du routeur et aussi nous avons importé le service de route d'activation ici,
et ensuite nous les avons rendus disponibles dans notre constructeur ici,
via la route de l'activateur.
Donc, c'est pourquoi nous sommes capables de faire ce params d'itinéraire pour obtenir les params observables.
Je vais utiliser l'opérateur SwitchMap sur les params
observables et puis quand j'obtiens les params observables,
ce que je vais faire est de prendre cela et ensuite dire, ce DishService.
getDish, puis cet ID doit maintenant être obtenu en utilisant les paramètres.
Vous voyez le paramètre que nous avons là.
A partir des paramètres, je dirai entre parenthèses ID.
Donc, ce qui se passe est que chaque fois que les paramètres observables changent de valeur,
ce qui signifie que le paramètre de route change de valeur, puis immédiatement,
l'opérateur de carte de commutateur prendra la valeur params,
et ensuite faire un GetDish à partir de mon DishService.
Donc, cela serait automatiquement initié,
et cela sera disponible comme l'autre
observable qui est émis en faisant cet opérateur de carte de commutateur sur cet observable.
Donc, nous créons un nouvel observable qui est le GetDish,
qui va retourner l'objet plat ici.
Maintenant, une fois que nous obtenons le GetDish là-bas,
alors cela peut maintenant être disponible en tant qu'observable.
Je m'abonne simplement à ce observable en utilisant le subscribe ici.
Puis, là j'obtiens le plat.
Ce plat est obtenu en faisant ce GetDish ici.
Ce plat, alors je peux l'utiliser pour le mapper dans
ma variable de plat que j'ai déclarée plus tôt.
Donc, de cette façon, mon plat est maintenant mis à jour.
Donc, chaque fois que les paramètres observables changent,
mon plat sera mis à jour pour le nouveau plat.
Donc, remarquez comment je prends un observable, les params observables,
et puis je mappe les params observables dans un autre observable qui est fondamentalement
aller chercher la valeur du plat de mon DishService,
et ensuite le rendre disponible comme observable.
Ensuite, je m'abonne à cela observable ici, et ensuite,
J'obtiens la valeur du plat ici,
et puis je cartographie la valeur du plat ou plutôt
rendant la variable du plat égale à la valeur du plat ici.
Remarquez comment en utilisant les observables,
vous êtes maintenant capable de prendre un observable puis de le mapper dans un autre observable.
Pourquoi est-ce intéressant ?
Si maintenant, j'ai un moyen de modifier ce paramètre de route,
alors je pourrai basculer entre différents plats et voir les différents plats.
Malheureusement, je n'ai pas cela en place.
Donc, j'ai besoin de modifier les composants du plat pour me permettre de le faire.
Maintenant, c'est là que je vais inclure quelques boutons dans ma vue qui quand je clique,
je pourrai naviguer dans ma liste de plats.
Maintenant, pour pouvoir naviguer dans ma liste de plats,
J'ai besoin de connaître l'ensemble de mes plats,
ou au moins j'ai besoin de connaître les identifiants de tous mes plats.
C'est la raison pour laquelle j'utilise ce Dishids ici, ok ?
Donc, maintenant vous voyez pourquoi j'ai inclus la méthode Dishids dans mon DishService.
Alors, alors je commence.
Je vais d'abord obtenir
les Dishids en appelant la méthode DishService,
getDishids à ce stade.
Je travaille toujours avec l'ancienne façon de faire les choses.
Je dois réaliser que ce getDishids envoie en observable.
Donc, je dois m'abonner à ce observable.
Vous voyez comment vous devez changer votre façon de penser lorsque
vous utilisez les variables ici.
Donc, nous dirions Dishids s'abonner,
et à l'intérieur du subscribe,
nous obtiendrons le paramètre qui est un tableau de chaînes,
et ensuite je dirais là,
Dishids sera égal à Dishids.
Voir, comme il est facile de
changer votre façon de penser quand vous voulez traiter avec un observable.
Donc, le GetDishids envoie un observable,
et je m'abonne à cet observable et puis j'ai les Dishids ici disponibles.
Puis, également en vous abonnant au paramètre.
Si je peux changer mon paramètre,
valeur de paramètre route valeur dans mon code,
alors je serai capable de naviguer parmi les plats.
Alors, mettons en œuvre cette partie.
Cela devient intéressant.
Donc, pour me permettre de faire cela,
donc je vais introduire une autre méthode ici appelée setPrevNext,
et à cela, j'enverrai un paramètre DisHid.
Maintenant, compte tenu de mon Dishid actuel,
, je voulais pouvoir trouver le Dishid précédent et le suivant afin que je puisse implémenter
ma navigation entre les plats dans mon composant dishdetail.
Donc, c'est la raison pour laquelle j'ai déclaré le prév et le suivant.
Maintenant, je dois pouvoir initialiser ces deux valeurs.
Tout ce que je sais maintenant, c'est mon Dishid actuel.
Donc, en utilisant le DisHid actuel,
je veux être en mesure de trouver le Dishid précédent et le suivant.
Donc, dans cette méthode,
, je vais faire le précédent et le suivant Dishid.
Donc, ici je vais dire,
laisser l'index égal à ce Dishids.
Maintenant, je ne connais que l'ID de mon plat,
mais l'ID de mon plat ne me donne pas tout.
J'ai besoin de pouvoir trouver le plat dans ce tableau d'ID,
donc c'est pourquoi je dis ce dishids, et indexOf.
Vous devez connaître l'opérateur IndexOf sur un tableau JavaScript.
L'opérateur IndexOf prend une valeur, puis trouve l'index de cette valeur dans le tableau.
Donc, IndexOf et le paramètre ici,
Je vais donner est le DisHid,
le DisHid que je vais obtenir dans un court laps de temps.
Maintenant, une fois que j'ai obtenu l'indice de cette valeur actuelle,
je peux alors mapper
les deux Dishids précédents.
Donc, c'est là que je
va faire un peu de code délicat ici qui me permettra de m'envelopper quand je le suis.
Donc, notez que ce tableau Dishids contient un certain nombre de valeurs là-bas.
Si ma valeur actuelle de mon disHid est le premier élément,
alors la valeur précédente sera l'élément indexé à zéro dans mon tableau.
Mais si ma valeur actuelle est l'élément zéro,
le tout premier élément de mon tableau,
alors je veux envelopper pour obtenir le dernier élément de mon tableau.
Donc, c'est là que je fais usage de l'opérateur modulo avec
une façon mathématique d'enrouler les choses autour.
Donc, je dirais ce Dishid
plus index moins un, et modulo la longueur de ce DishIds.
Donc, ce que je fais est,
la valeur précédente sera l'indice courant,
indice de la valeur actuelle,
plus la longueur des plats moins un.
Maintenant, si l'index est un,
index moins un me donnera zéro.
Si l'index est zéro,
index moins un me donnera moins un,
mais ce n'est pas ce que je veux.
Je veux envelopper et obtenir la longueur Dishid moins un.
Donc, c'est pourquoi j'y insère ceci,
, puis je fais un modulo avec les Dishids.
Donc, quand l'index est zéro,
je vais m'enrouler pour obtenir le dernier élément de mon tableau.
Donc, c'est ainsi que j'initialise la valeur précédente.
Ensuite, la valeur suivante,
Je vais utiliser la même approche,
mais envelopper en disant index plus un.
Donc, si je suis actuellement au dernier élément du tableau,
alors je veux envelopper à zéro.
Donc, c'est l'autre partie de ce que je fais.
Donc, là, je mets le précédent et le suivant.
Alors, quand dois-je définir le précédent et le suivant ?
Chaque fois que mon plat change,
Je dois pouvoir lancer un appel.
Maintenant, où est-ce que je change ma valeur de plat ?
En regardant en arrière l'abonnement ici,
remarquez que juste là,
vous changez votre plat chaque fois que notre paramètre change.
Donc, à ce moment-là,
, je veux réinitialiser ma valeur précédente et suivante.
Donc, je vais changer ceci en un bloc de code ici.
Ensuite, je dirais que setPrevNext,
et ensuite le paramètre serait disHid.
C'est ça. Donc, avec ce changement,
ce qui se passe est chaque fois que mon plat est mis à jour,
Je vais mettre à jour le précédent et le suivant aussi en conséquence d'ici.
Donc, avec ce petit changement,
mon Dishid sera le plat actuel.
Le précédent pointera vers le plat précédent,
et le suivant sera pointé vers le prochain Dishid.
Donc, j'ai tous les trois dont j'ai besoin.
Maintenant, je peux utiliser ces trois valeurs afin d'implémenter la façon de naviguer
parmi les plats de mon modèle en incluant quelques boutons dans mon modèle.
Alors, passons au modèle de composants dishdetail,
, puis incluons quelques boutons qui me permettent de naviguer parmi les plats.
Aller au composant Dish Detail pendant que je suis ici,
laissez-moi prendre ce NGiF de cette carte et ensuite le déplacer dans la div là-haut.
Je veux cacher toute la div,
quand mon plat n'est actuellement pas défectueux,
de même pour les commentaires aussi.
Je trouve cela un peu bizarre
lorsque mes informations de plat sont récupérées sur le serveur.
Donc, je vais faire ce changement pour les deux divs que
l'un montrant les commentaires et l'autre montrant les détails du plat dans la carte.
Avec ces deux mises à jour,
dans mes actions de carte,
Je vais inclure
un bouton de plus de type bouton évidemment et ce bouton,
Je vais inclure le RouterLink.
Dès que vous voyez le lien du routeur,
vous dites immédiatement, « Oh,
Je sais ce que vous essayez de faire.
Vous essayez de convertir ce bouton pour pouvoir naviguer parmi
les différents composants de mon service. »
Donc, pour le RouterLink,
je vais fournir un tableau de valeurs et le tableau de valeurs pour le RouterLink,
Je vais faire dishdetail.
Aussi, la deuxième partie.
Voir, c'est la partie intéressante.
La deuxième partie de ce tableau sera prev,
qui est la variable que j'ai déclarée dans mon composant.
Donc, avec cela, ce bouton deviendra un lien vers le plat précédent dans ma liste de plats.
Spiffy, hein ?
Alors, avec ça, quoi d'autre ?
Laissez-moi fermer le bouton ici et puis à l'intérieur du bouton,
Je vais utiliser une icône Font Impressionnant
fa chevron-gauche.
Alors, c'est tout. Ce bouton sera un bouton avec une icône là.
Donc, maintenant nous avons un bouton ici,
Je vais aussi inclure un autre bouton ici.
Avant d'inclure le bouton,
Je vais faire span class flex-spacer,
vous m'avez vu utiliser le flex-spacer dans l'un des exercices précédents.
Alors, vous voyez ce que je fais,
Je m'étire pour inclure le deuxième bouton.
Donc, pour le deuxième bouton,
Je vais juste copier ce
et ensuite le coller là et mettre à jour celui-ci pour dire prev.
Au lieu de précédent, j'irai ensuite
fa-chevron-gauche à fa-chevron-droite, et c'est tout.
Sauvegardons les modifications apportées à nos composants Dish Detail,
et aussi les fichiers restants.
Après cette mise à jour, allons voir ce que fait notre application.
Aller à mon application dans le navigateur,
allons au composant Menu.
Nous voyons le Menu et sélectionnons un élément du Menu ici.
Donc, notez que maintenant cet élément du plat de menu est affiché ici.
Avis en bas,
nous avons deux boutons ici, à gauche et à droite.
Lorsque nous cliquons sur le bouton gauche,
notez comment nous sommes en mesure de passer au plat précédent dans la liste des plats.
Je peux continuer à faire à gauche et continuer à naviguer vers la gauche et la droite.
Notez que lorsque je fais cela,
ma vue réelle n'est pas rechargée,
à la place je vais seulement chercher
les données relatives à la vaisselle du service, puis mettre à jour ma vue ici.
La raison pour laquelle nous sommes capables de le faire est parce que nous
avons l'observable, les params observables.
Donc, chaque fois que je clique sur ces deux-là,
gauche et droite, les params observables,
remarque comment en ce moment l'adresse montre plat zéro.
Si je clique sur la droite,
alors cela sera mis à jour de dishdetail zero à dishdetail one.
Ce changement de paramètre, et cela entraînera mon observable à
aller chercher le nouveau plat du service de vaisselle.
Ensuite, le nouveau plat est récupéré,
la variable de plat dans mon composant est mise à jour,
et quand cela est mis à jour,
ma vue est également mise à jour.
Donc, notez que j'utilise la même vue,
Je suis capable de naviguer parmi les différents plats qui font partie de ma liste de plats.
C'est la partie intéressante que vous pouvez obtenir en utilisant les params
observables à partir de l'activator.service dans votre application Angular.
Une façon intéressante de faire usage des factures observables notre application Angular.
Bien sûr, la façon dont je l'ai implémenté,
Je l'ai fait un peu d'une façon inventée de faire les choses.
J'ai dû me procurer la liste des cartes d'identité.
J'ai dû modifier le précédent et le suivant et ainsi de suite.
Si vous aviez un moyen d'obtenir automatiquement le
précédent et la valeur suivante de votre service,
chaque fois que vous récupérez un plat,
alors la mise en œuvre du score deviendra un peu plus facile.
En ce moment, nous n'avons pas ça.
Donc, j'ai travaillé autour du problème parce que je voulais juste illustrer la façon dont
utilise un observable comme celui-ci dans votre application Angular.
Si nous pouvons implémenter le service qui retournera la valeur
précédente et la valeur suivante chaque fois que nous allons chercher un plat,
alors tout ce mal de tête sera beaucoup plus simplement résolu.
Reporte cette idée à un stade ultérieur.
Mais pour le moment, vous voyez comment nous faisons en sorte que
utilise les paramètres observables afin d'implémenter
une façon intéressante de supporter une nouvelle fonctionnalité dans notre application Angular.
Ceci termine cet exercice.
C'est le bon moment pour vous de faire un commit git avec le message RXJS Part 2.