Nun, da du deine Füße nass mit Angular-Observables in der vorherigen Übung gemacht
hast, blickst du zurück und sagst:
„Oh Observables sind ja nicht so schlecht,
sie sind ziemlich einfach, um Gebrauch zu machen.“
Also werden wir ein bisschen ehrgeiziger.
Gehen wir einen Schritt weiter und nutzen dann ein integriertes beobachtbares in Angular.
Die beobachtbaren Parameter,
die vom aktivierten Routendienst innerhalb unseres Router-Moduls kommen.
Wir werden nun die Komponente „Detail“ aktualisieren,
um die Parameter zu nutzen,
die vom Aktivator Dürre Service beobachtet werden können, um
einige neue Funktionen in unserer Angular-Anwendung zu unterstützen.
Bevor wir fortfahren, um die Komponente des Gerichtes
zu aktualisieren, möchte ich eine weitere Methode in meiner Datei „Dish service.ts“ einführen.
Also öffnen Gericht service.ts Datei und dann werden wir eine neue Methode namens
GetDishids hinzufügen und dies wird im Grunde
alle Gerichte IDs zurückgeben ist für alle Gerichte in unserer Sammlung von Gerichten.
Also, um das zu tun, verwenden wir eine Rückkehr
und eine Methode und bevor ich das tue,
gibt dies eine beobachtbare zurück.
Was für eine Art?
Dies gibt eine beobachtbare zurück, die aus einem Array von
String besteht und lassen Sie uns
es um 2.000 Millisekunden oder zwei Sekunden verzögern.
Also, was wollen wir zurückkehren?
Wir wollen das Geschirr Array nehmen,
alle IDs aus dem Geschirr Array extrahieren und
es dann unserer Dish Detail Komponente geben,
weil wir das innerhalb unserer Dish Detail Komponente benötigen, um
die neue Funktion zu implementieren, die wir in unserer Anwendung unterstützen werden.
Nun, das ist eine Möglichkeit, dass ich es implementieren möchte.
Später können wir sehen, wie wir es
in einer der späteren Übungen besser machen können.
Im Moment, mit der Art und Weise, wie der Service implementiert wird,
ist dies das Beste, was ich tun könnte, um diese Lösung zu implementieren, um eine neue Funktion zu demonstrieren.
Also, innerhalb des Beobachtbaren,
was ich tun werde, ist,
dass ich das Geschirr Array und die Gerichte Array nehmen werde.
Ich werde die Karte,
einen Array-Operator, die JavaScript-Array-Operatorkarte verwenden.
Also, der Kartenoperator,
wie es funktioniert, ist, dass es jedes Element aus dem Geschirr Array nimmt und wir können
dieses Element in ein anderes Element zuordnen und dann ein
anderes Array konstruieren und dann dieses modifizierte Array zurückgeben.
Also, für jeden Artikel in meinem Geschirr Array,
werde ich diesen Artikel nehmen und dann stattdessen
die Gericht ID und dann aus der Gericht ID extrahieren.
Also, ich werde am Ende ein neues Array daraus konstruieren, das
nur die IDs enthält,
also ein Array von IDs und wir sehen bereits, dass die IDs String sind,
das ist, was ich hier von meiner Dish ID zurückgeben werde.
Das war's, der Kartenarray-Operator.
Wenn Sie JavaScript-Array-Operatoren nachschlagen,
werden Sie sehen, was der Kartenarray-Operator tut.
Tatsächlich ist der Kartenarray-Operator auch
aus der Perspektive der Observables interessant,
da ein beobachtbares, wie Sie gesehen haben,
auch als Array betrachtet werden kann,
ein Wertestrom
, der als Array betrachtet werden kann.
So kann der Kartenoperator auch in Observables verwendet werden.
Aber in diesem Moment verwende ich es einfach als JavaScript-Array-Operator.
Speichern wir die Änderungen.
Nun gehen wir zur Komponente „Dish Detail“ und aktualisieren dann die Komponente „Dish Detail“.
Nun, innerhalb der Dish Detailkomponente,
zusammen mit dem Dish,
werde ich eine Variable namens Dishids deklarieren,
die ein Array von String ist.
Diese DeShids speichert alle IDs
aller Gerichte, die in meiner Sammlung von Gerichten in meiner Speisekarte sind.
Dann werde ich auch
zwei weitere Variablen haben, die vorherige und nächste der Typzeichenfolge genannt werden.
Warum brauche ich die?
Das wird ein bisschen klarer,
sobald Sie die Ansicht implementieren,
wo ich dies nutzen werde.
Nun, was ich hier tun werde, ist, dass
wir in meinem NGinit früher ID gleich plus dieser route.snapshot params ID gelassen haben.
Als ich das in der vorherigen Übung gemacht
habe, habe ich dir nicht erklärt, was der Schnappschuss gemacht hat und warum wir es so machen?
Weil Sie Observables verstehen mussten,
bevor Sie verstehen, was der Snapshot bedeutet.
Jetzt stellt der aktivierte Routen-Service in Angular eine Reihe von Observables bereit.
Eines der Observables wird als Parameter bezeichnet.
Was uns diese Parameter bietet,
ist eine Möglichkeit, die Parameterwerte innerhalb meiner URL zu erhalten.
Sie haben also gesehen, dass Sie bei der Einführung der Routenparameter
einen der Routenparameter als Doppelpunkt-ID eingeführt haben.
Diese Doppelpunkt-ID wird als beobachtbar verfügbar.
Wenn sich dieser Wert ändert,
können Sie Änderungen an diesem Wert beobachten und dann entsprechend handeln.
Aber früher, als wir die Komponente „Dish Detail“ implementiert
haben, wussten wir nichts über Observables.
Also konnte ich nicht erklären, was der Snapshot zu diesem Zeitpunkt tat.
Lassen Sie mich zurückgehen und genau erklären, was die Momentaufnahme macht.
Wenn wir dies als Snapshot hier verwenden,
was wir tun, ist, dass
wir einen Schnappschuss
vom Routen-Service nehmen und dann erhalten wir
den Parameter, der zu diesem bestimmten Zeitpunkt beobachtbar ist.
Der Wert der Parameter zu diesem bestimmten
Zeitpunkt und dann Gebrauch von ihm innerhalb unserer Anwendung.
Obwohl das nicht der ideale Weg ist, dies zu tun.
Stattdessen lassen Sie uns das beobachtbare
direkt nutzen und dann reagieren, wenn sich das beobachtbare ändert.
Also, wie aktualisieren wir diesen Code, um das Observable direkt zu nutzen?
Was wir also erkennen, ist, dass
wir vom aktivierten Routendienst die Parameter haben, die uns beobachtbar sind.
Also, wir werden die Parameter beobachtbar machen und
jedes Mal, wenn es eine Änderung in wo params beobachtbar ist,
können wir eine Änderung innerhalb unserer DishDetail-Komponente initiieren.
Lassen Sie mich Ihnen zeigen, wie wir
die beobachtbaren Parameter nutzen werden, indem wir diesen Code aktualisieren.
Also, zu diesem Code
zu gehen, was ich jetzt tun werde,
ist, dass ich dies ändern werde, um zu sagen:
„Ich habe diese Route und von dieser Route
habe ich die Parameter bereits verfügbar.“
Also werde ich den Snapshot entfernen und die Parameter verwenden.
Also, mit diesen Parametern,
was ich jetzt habe, ist der Zugang zu den Parametern beobachtbar.
Nun, da wir diese Parameter beobachtbar haben,
werde ich einen Operator für diese Parameter verwenden, die beobachtbar sind und ihn dann modifizieren.
Also, der Operator, den ich verwenden werde, heißt SwitchMap-Operator.
Der SwitchMap-Operator ermöglicht es mir,
die Parameter beobachtbar zu machen und Sie sehen die rote verrückte Linie,
die bedeutet, dass ich die hier beobachtbare SwitchMap importieren muss.
Also, ich werde
hier zu meinen Eingaben gehen und
dann werde ich rxjs und operator eingeben.
Also, von den Parametern beobachtbar,
bekomme ich params, die vom Typ Params ist.
Also, erinnern Sie sich, dass wir die Parameter aus der Router-Bibliothek hier importiert haben.
Also, wir flehten zu params hier,
aus der Router-Bibliothek und auch wir importierten den Aktivierungs-Routendienst hier,
und dann haben wir sie in unserem Konstruktor hier
über die Aktivator-Route zur Verfügung gestellt.
Also, deshalb sind wir in der Lage, diese Route params zu machen, um die Parameter beobachtbar zu bekommen.
Ich werde den SwitchMap-Operator für die
beobachtbaren Parameter verwenden und dann, wenn ich die Parameter beobachtbar
mache, ist das zu nehmen und dann diesen DishService zu sagen.
GetDish, und dann sollte diese ID jetzt durch die Verwendung der Parameter erhalten werden.
Sie sehen den Parameter, den wir dort haben.
Von den Parametern, werde ich sagen, in Klammern ID.
Was passiert, ist, dass, wenn die beobachtbaren Parameter den Wert ändert,
was bedeutet, dass der Routenparameter den Wert ändert, sofort
der Switch-Map-Operator den params-Wert annimmt
und dann einen GetDish von meinem DishService ausführt.
Also, dies würde automatisch initiiert werden,
und dies wird als die andere
beobachtbare verfügbar sein, die durch diesen Schalter Kartenoperator auf diesem beobachtbaren emittiert wird.
Also, wir erstellen ein neues Observable, das die GetDish
ist, die das Gericht Objekt hier zurückgeben wird.
Jetzt, wenn wir das GetDish dort haben,
dann kann das jetzt als Beobachtbare verfügbar sein.
Ich abonniere nur das beobachtbare mit dem hier abonnieren.
Dann bekomme ich das Gericht.
Dieses Gericht wird durch diese GetDish hier erhalten.
Dieses Gericht, dann kann ich verwenden, um es in
meine Dishvariable zu mappen, die ich zuvor deklariert habe.
Also, auf diese Weise wird mein Gericht jetzt aktualisiert.
Also, jedes Mal, wenn sich die Parameter beobachtbar ändert,
wird mein Gericht auf das neue Gericht aktualisiert.
Also, beachten Sie, wie ich ein beobachtbares nehme, die Parameter beobachtbar,
und dann mappen ich die beobachtbaren Parameter in ein anderes beobachtbares
ab, das im Grunde den DishService abruft
und diesen dann als beobachtbar zur Verfügung stellt.
Dann abonniere ich dieses Observable hier, und dann
bekomme ich hier den Dish-Wert,
und dann mappe ich den Dish-Wert oder
mache die Dish-Variable gleich dem Dish-Wert hier.
Beachten Sie, dass
Sie mit den Observables jetzt in der Lage sind, ein Beobachtbares zu nehmen und es dann einem anderen beobachtbaren zuzuordnen.
Warum ist das interessant?
Wenn ich jetzt eine Möglichkeit habe, diesen Routenparameter
zu ändern, kann ich zwischen verschiedenen Gerichten wechseln und die verschiedenen Gerichte sehen.
Leider habe ich das nicht an Ort und Stelle.
Also muss ich die Schalenkomponenten modifizieren, damit ich das tun kann.
Nun, hier werde ich ein paar Schaltflächen in meine Ansicht einfügen, die, wenn ich klicke,
ich in der Lage sein werde, durch meine Liste der Gerichte zu navigieren.
Nun, um durch meine Liste der Gerichte navigieren
zu können, muss ich das Set aller meiner Gerichte kennen,
oder zumindest muss ich die IDs aller meiner Gerichte kennen.
Das ist der Grund, warum ich diese Dishids hier benutze, okay?
Also, jetzt sehen Sie, warum ich die Dishids-Methode in meinen DishService aufgenommen habe.
Also, dann fange ich an.
Ich werde zuerst
die Dishids erhalten,
indem ich zu
diesem Zeitpunkt die DishService, GetDishids -Methode aufrufe.
Ich arbeite immer noch mit der alten Art, Dinge zu tun.
Ich muss erkennen, dass dieses GetDishids beobachtbar aussendet.
Also, ich muss das beobachtbare abonnieren.
Hier sehen Sie, wie Sie Ihre Denkweise ändern müssen, wenn
Sie mit den Variablen arbeiten.
Also, wir würden sagen, Dishids abonnieren,
und innerhalb des Abonnements
werden wir den Parameter erhalten, der ein String-Array ist,
und dann würde ich sagen, genau dort,
Dishids werden gleich Dishids sein.
Sehen Sie, wie einfach es ist,
Ihre Denkweise zu ändern, wenn Sie mit einem beobachtbaren umgehen wollen.
Also, die GetDishids senden ein Observable,
und ich abonniere dieses Observable und dann habe ich die Dishids hier verfügbar.
Dann auch durch Abonnieren des Parameters.
Wenn ich meinen Parameter ändern kann,
den Wert des Routenparameters innerhalb meines Codes,
dann kann ich zwischen den Gerichten navigieren.
Also, lassen Sie uns diesen Teil implementieren.
Das wird interessant.
Also, um mir das zu ermöglichen,
werde ich hier eine andere Methode namens setPrevNext vorstellen,
und dazu werde ich einen Parameter disHid senden.
Nun, angesichts meiner aktuellen DishiD,
wollte ich in der Lage sein, die vorherige und die nächste Dishid zu finden, so dass ich
meine Navigation zwischen den Gerichten innerhalb meiner dishdetail Komponente implementieren kann.
Also, das ist der Grund, warum ich die Prev und die nächste erklärt.
Jetzt muss ich in der Lage sein, diese beiden Werte zu initialisieren.
Alles, was ich jetzt weiß, ist meine derzeitige DisHid.
Also, mit der aktuellen DisHid,
möchte ich in der Lage sein, die vorherige und die nächste DisHID zu finden.
Also, bei dieser Methode
werde ich die vorherige und die nächste DishID machen.
Also, hier werde ich sagen,
lassen Index gleich diesem Dishids.
Ich kenne nur die ID meines Gerichts,
aber die ID meines Gerichts gibt mir nicht alles.
Ich muss in der Lage sein, das Gericht in diesem Array von IDs zu finden
, also sage ich dies Dishids und IndexOf.
Sie sollten den IndexOf Operator in einem JavaScript-Array kennen.
Der IndexOf-Operator nimmt einen Wert und findet dann den Index dieses Wertes im Array.
Also, indexOf und der Parameter hier,
werde ich geben, ist die DishiD,
die DishiD, die ich in kurzer Zeit erhalten werde.
Jetzt, sobald ich den Index dieses aktuellen Wertes erhalten
habe, kann ich dann
die vorherigen beiden DisHIDs abbilden.
Also, hier
werde ich ein bisschen kniffligen Code hier machen, der es mir erlaubt, umzuspringen, wenn ich bin.
Beachten Sie also, dass dieses disHids-Array dort eine bestimmte Anzahl von Werten enthält.
Wenn mein aktueller Wert meiner DisHID das erste Element ist,
dann ist der vorherige Wert das null indizierte Element in meinem Array.
Aber wenn mein aktueller Wert das Nullelement ist,
das allererste Element in meinem Array,
dann möchte ich umwickeln, um das letzte Element in meinem Array zu erhalten.
Also, hier verwende ich den Modulo-Operator mit einer
mathematischen Art, Dinge zu umwickeln.
Also, ich würde sagen, dieser Dishid
plus Index minus eins, und modulo diese Dishids Länge.
Also, was ich tue, ist,
der vorherige Wert wird der aktuelle Index,
Index des aktuellen Wertes
plus die Länge der Gerichte minus eins sein.
Nun, wenn Index eins ist,
wird Index minus eins mir Null geben.
Wenn der Index Null ist,
gibt mir Index minus eins minus eins,
aber das ist nicht, was ich will.
Ich möchte umwickeln und die Dishid-Länge minus eins bekommen.
Deshalb schließe ich das hier ein
und mache dann ein Modulo mit den Dishids.
Also, wenn Index Null ist,
werde ich umwickeln, um das letzte Element in meinem Array zu erhalten.
So initialisiere ich den vorherigen Wert.
Dann, der nächste Wert,
werde ich den gleichen Ansatz verwenden,
aber umschließen, indem ich Index plus eins sage.
Also, wenn ich derzeit am letzten Element im Array bin,
möchte ich auf Null umwickeln.
Also, das ist der andere Teil von dem, was ich tue.
Also, da setze ich das vorherige und das nächste ein.
Also, wann sollte ich das vorherige und das nächste einstellen?
Jedes Mal, wenn sich mein Gericht ändert,
muss ich in der Lage sein, einen Aufruf dazu zu initiieren.
Nun, wo ändere ich meinen Teller Wert? Wenn Sie
auf das Abonnieren hier zurückblicken,
beachten
Sie, dass Sie Ihr Gericht jedes Mal ändern, wenn sich unsere Parameter ändern.
Also, an diesem Punkt
möchte ich meinen vorherigen und nächsten Wert zurücksetzen.
Also werde ich das hier in einen Codeblock ändern.
Dann würde ich sagen, diese setPrevNext,
und dann wäre der Parameter disHid.
Das ist es. Also, mit dieser Änderung,
was passiert, ist jedes Mal, wenn mein Gericht
aktualisiert wird, Ich werde das vorherige und das nächste auch entsprechend von hier aktualisieren.
Also, mit dieser kleinen Änderung
wird mein DishiD das aktuelle Gericht sein.
Das vorherige wird auf das vorherige Gericht zeigen,
und das nächste wird auf die nächste DishID verwiesen.
Also, ich habe alle drei, die ich brauche.
Jetzt kann ich diese drei Werte nutzen, um die Art und Weise zu implementieren,
zwischen den Gerichten in meiner Vorlage zu navigieren, indem ich ein paar Schaltflächen in meine Vorlage einfüge.
Also, gehen wir zur Vorlage dishdetail Komponenten,
und fügen Sie dann ein paar Schaltflächen, mit denen ich zwischen den Gerichten navigieren kann. Wenn ich
zur Dish Detail Komponente gehe, während ich hier bin,
lass mich dieses NGIF von dieser Karte nehmen und es dann in das div dort oben verschieben.
Ich möchte das gesamte div verbergen,
wenn mein Gericht derzeit nicht defekt ist,
ähnlich für die Kommentare auch.
Ich finde das ein bisschen lästig,
wenn meine Gerichteninformationen vom Server abgerufen werden.
Also, ich werde diese Änderung sowohl für die beiden divs vornehmen, dass
eines die Kommentare und das andere zeigt die Details des Gerichts in der Karte.
Mit diesen beiden Updates,
innerhalb meiner Kartenaktionen,
werde ich
offensichtlich eine weitere Schaltfläche des Tastentyps einschließen und diese Schaltfläche,
Ich werde den RouterLink einschließen.
In dem Moment, in dem
Sie den Router Link sehen, sagen Sie sofort: „Oh,
ich weiß, was Sie versuchen zu tun.
Sie versuchen, diese Schaltfläche zu konvertieren, um zwischen
den verschiedenen Komponenten in meinem Dienst navigieren zu können.“
Also, für den RouterLink,
werde ich ein Array von Werten und das Array von Werten für den RouterLink
zur Verfügung stellen, ich werde dishdetail tun.
Auch der zweite Teil.
Sehen Sie, das ist der interessante Teil.
Der zweite Teil dieses Arrays wird prev sein,
was die Variable ist, die ich in meiner Komponente deklariert habe.
Damit wird dieser Knopf ein Link zum vorherigen Gericht in meiner Liste der Gerichte.
Spiffy, richtig?
Also, mit dem, was sonst?
Lassen Sie mich schließen Sie den Knopf hier und dann innerhalb der Taste,
Ich werde eine Font Awesome Symbol
fa chevron-links verwenden.
Also, das war's. Diese Schaltfläche wird eine Schaltfläche mit einem Symbol dort sein.
Also, jetzt haben wir einen Knopf hier,
ich werde auch einen anderen Knopf hier einschließen.
Bevor ich den Knopf
einschließe, werde ich span class flex-spacer machen,
du hast mich mit dem Flex-Spacer in einer der früheren Übungen gesehen.
Also, Sie sehen, was ich tue,
ich strecke, um den zweiten Knopf einzuschließen.
Also, für die zweite Schaltfläche,
werde ich das einfach kopieren
und es dann dort einfügen und dann diese aktualisieren, um vorab zu sagen.
Anstelle von vorherigen, werde ich als nächstes gehen und dann
fa-chevron-links nach fa-chevron-right, und das war's.
Speichern wir die Änderungen an unseren Dish Detail Components
und auch den restlichen Dateien.
Nach diesem Update, lassen Sie uns gehen und überprüfen, was unsere Anwendung tut.
Gehen wir zu meiner Anwendung im Browser,
gehen wir zur Menükomponente.
Wir sehen das Menü und wählen Sie einen Eintrag aus dem Menü hier.
Beachten Sie also, dass jetzt dieser Artikel aus der Menüschale hier angezeigt wird.
Beachten Sie unten,
wir haben zwei Tasten hier, links und rechts.
Wenn wir auf die linke Schaltfläche klicken,
beachten Sie, wie wir in der Lage sind, zum vorherigen Gericht in der Liste der Gerichte zu gelangen.
Ich kann weiter links machen und weiter nach links und rechts navigieren.
Beachten Sie, dass, wenn ich dies tue,
meine tatsächliche Ansicht nicht neu geladen wird,
stattdessen werde ich nur
die Dish-bezogenen Daten aus dem Dienst holen und dann meine Ansicht hier aktualisieren.
Der Grund, warum wir dies tun können, ist, weil
wir das beobachtbare, die beobachtbaren Parameter haben.
Also, jedes Mal, wenn ich auf diese beiden klicke,
links und rechts, die Parameter beobachtbar,
bemerken, wie in diesem Moment die Adresse zeigt dishdetail Null.
Wenn ich rechts klicke,
wird das von dishdetail null zu dishdetail eins aktualisiert.
Diese Parameteränderung, und das wird dazu führen, dass meine Beobachtbare
gehen und holen das neue Gericht aus dem Gericht Service.
Dann wird das neue Gericht abgerufen,
die Dishvariable in meiner Komponente wird aktualisiert,
und wenn das aktualisiert wird,
wird meine Ansicht auch aktualisiert.
Also, beachten Sie, dass ich die gleiche Ansicht verwende,
ich bin in der Lage, zwischen den verschiedenen Gerichten zu navigieren, die Teil meiner Liste der Gerichte sind.
Dies ist der interessante Teil, den Sie erhalten können, indem Sie die Parameter verwenden,
die von activator.service innerhalb Ihrer Angular-Anwendung beobachtbar sind.
Interessante Art und Weise der Nutzung von Observables Rechnungen unsere Angular-Anwendung.
Natürlich, so wie ich es implementiert habe,
habe ich es ein bisschen eine künstliche Art gemacht, Dinge zu tun.
Ich musste die Liste der Teller IDs bekommen.
Ich musste das vorherige und das nächste ändern und so weiter.
Wenn Sie eine Möglichkeit hatten, den vorherigen
und den nächsten Wert automatisch von Ihrem Dienst zu erhalten,
wenn Sie ein Gericht holen,
wird die Implementierung der Punktzahl etwas einfacher.
Im Moment haben wir das nicht.
Also habe ich das Problem umgangen, weil ich nur die Art und Weise illustrieren wollte,
ein Observable wie dieses in Ihrer Angular-Anwendung zu verwenden.
Wenn wir den Dienst implementieren können, der den
vorherigen und den nächsten Wert zurückgibt, wenn wir ein Gericht holen,
dann werden all diese Kopfschmerzen viel einfacher gelöst sein.
Lassen Sie uns diese Idee auf einen späteren Zeitpunkt verschieben.
Aber im Moment sehen Sie, wie wir
die beobachtbaren Parameter nutzen, um
eine interessante Möglichkeit zu implementieren, eine neue Funktion innerhalb unserer Angular-Anwendung zu unterstützen.
Damit ist diese Übung abgeschlossen.
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht RXJS Teil zwei zu machen.