Lassen Sie uns nun weiter an
der einseitigen Anwendung arbeiten, die wir in unseren Übungen entwickelt haben.
Bisher haben wir die Home-Komponente,
die Menükomponente und die Kontaktkomponente in unsere einseitige Anwendung integriert.
Die Komponente „Dish Detail“ wird derzeit am unteren Rand der Menükomponente verwendet.
Wenn Sie also auf eines der Elemente im Menü klicken,
werden die Details des Gerichts direkt unten im Menü angezeigt.
Nun werden wir eine weitere Unterstützung nutzen, die das Angular Router Modul bietet,
wodurch wir eine Route mit einem Parameter definieren können, der in der Routendefinition enthalten ist.
Auf diese Weise können wir Informationen an eine andere Komponente weitergeben
und dann von dort aus
Informationen in der anderen Komponente anzeigen.
Wie funktioniert das?
Lasst uns das lernen, indem wir diese Übung machen. Wenn Sie
also zu unserer Anwendung zurückkehren, werden
in dieser Anwendung, wenn Sie auf das Menü schauen,
wenn Sie auf ein Element im Menü klicken,
die Details des ausgewählten Elements direkt unten im Menü angezeigt.
Nun möchte ich die Ansicht der Details
dieses speziellen Gerichts in seine eigene separate Ansicht aufteilen.
Wenn ich auf eines dieser klicke,
möchte ich in der Lage sein, die Details des Gerichts anzuzeigen,
insbesondere in einer Ansicht in dieser Anwendung.
Um dies zu erreichen, werden wir, wie gesagt,
die Routenparameter nutzen, um
diese Art von Verhalten in unserer Anwendung zu unterstützen.
Wie machen wir das?
Lassen Sie uns das tun, indem wir hier mit der Definition einer neuen Route mit einem Parameter beginnen.
Um die Schale Detailkomponente zu nutzen,
gehen wir in die Routen,
und definieren dann eine neue Route nach Menü hier.
Sehen Sie sich die Art und Weise an, wie die Route hier definiert ist.
Also, das ist Pfad, dishdetail.
Also, dieses Gericht Detail ist Teil der Schale Detail Komponente.
Also, es hat seine eigene Sicht.
Jetzt möchte ich in der Lage sein, zu dieser Ansicht zu navigieren,
aber mit einer Parameter-ID,
da in dieser Detailansicht eines der Gerichte in meinem Menü angezeigt wird.
Also, ich möchte in der Lage sein, ein ausgewähltes Gericht im Gericht Detail anzuzeigen.
Nun, das ausgewählte Gericht wird eine ID haben,
und ich möchte diese ID in mein Gericht detaillierte Komponenten übergeben,
damit es die Details dieses bestimmten Gerichts rendern kann.
In Angular Router
unterstützt es die Übergabe von Parametern, indem Routenparameter wie diese
in der Definition des Routers selbst definiert werden.
Also, innerhalb des Pfades,
wenn ich Doppelpunkt sage,
so dass Doppelpunkt von einem Namen gefolgt werden kann, der als Routenparameter fungiert.
Also, in diesem Fall werde ich den Parameternamen als ID verwenden.
Diese ID bezieht sich auf die ID des Gerichts, die wir bereits jedem unserer Gerichte gegeben haben.
Nun, das wird mich zu der Schüssel Detail Komponente bringen.
Also, wir fügen in dieser neuen Route unsere Angular-Routendefinition hier hinzu.
Speichern Sie die Änderungen.
Nun, in der Menükomponente,
also wenn ich die Menükomponenten-Vorlagendatei öffne
,
zeige ich in der Menükomponente das Gericht unten hier an.
Also, ich will das nicht tun.
Also werde ich diesen Teil aus meiner Menükomponenten-Vorlage löschen.
Stattdessen ist mir klar, dass
ich direkt dort auf das jeweilige Gericht zugreifen kann.
Also, wenn das Gericht geklickt wird,
anstatt dies
zu tun, klicken Sie hier, also werde ich diesen Klick entfernen, und stattdessen
werde ich hier einen neuen Parameter definieren, der als RouterLink bezeichnet wird.
Hier sehen Sie die Verwendung des RouterLink.
Nun nimmt dieser RouterLink Werte auf, die Sie in Ihrer Vorlage wie folgt angeben können.
So können Sie das hier als Array bereitstellen.
Innerhalb des Arrays können Sie zwei Teile eines Arrays liefern.
Also, Dishdetail.
Sie haben also gesehen, dass ich, als ich die Route definiert habe, „/dishdetail/:id“ sagte.
Also, der Angular-Router wird den Parameter übergeben, den ich
hier als Teil des zweiten Teils dieser URL gebe.
Also, jetzt, zusammen mit dem Gericht Detail,
werde ich meinen RouterLink mit Gericht Detail konstruieren,
und auch die Gericht ID hier.
Also, dieses Gericht ID bezieht sich auf das spezifische Gericht, das ich
aus der Reihe von Gerichten hier ausgewählt habe.
Also, dieser Teller ID,
ich habe Zugang dazu hier.
Also werde ich das als zweiten Teil in diesem Array von Parametern verwenden
, den ich hier für meinen RouterLink übergeben werde.
Also, wenn ich es so definiere,
dann, wenn ich auf diesen bestimmten Punkt in meinem Menü klicke
, dann
wird diese detaillierte, die Gericht ID, zusammen mit diesem dishdetail, als Router Link übergeben.
Diese Informationen werden nun über
meine Angular-Router zu meinen Dish Detailkomponenten verfügbar sein.
Der Router ermöglicht es also, dass die Komponente „
Dish ID“ diesen Wert von der Angular-Route abruft, wenn diese Informationen an sie übergeben werden.
Wie machen wir das?
Dafür müssen wir auf die Schüssel Detailkomponente gehen und das beheben, um diese Informationen zu erhalten.
Nachdem wir diese Änderungen an der Menükomponente vorgenommen haben,
wechseln wir nun zur Komponente „Dish Detail“.
Im Inneren der Schale Detailkomponente
sehen Sie, dass
ich derzeit das Gericht als Eingabe hier erhalten habe.
Ich werde nicht mehr das Geschirr und Input erhalten.
Also, ich werde das einfach als solches verlassen,
als einfach ein Gericht.
Ich brauche die Eingabe nicht mehr, weil ich diese Informationen nicht mit dem Gericht
in eckigen Klammern übergebe, die ich in meine Menükomponente aufgenommen habe.
Stattdessen diese Informationen über die spezifischen Gerichte kommen durch den Angular Router.
Wie bekomme ich Zugang zu diesem Gericht ID?
Also, um das zu tun,
gehe ich hier rein.
In dieser Anwendung werde ich hier zwei weitere Importe hinzufügen,
einer von ihnen namens Params.
Also, dieser Params gibt mir Zugriff auf
die Router-Parameter, die verfügbar sind, wenn ich hereinkomme.
Also, das ist vom Angular-Router, Params,
und auch ein anderer, den ich brauche, ist der Standort.
Location ermöglicht es mir, den Standort
meiner Seite im Verlauf meines Browsers zu verfolgen.
Also, das wäre nützlich für mich, von meinem Gericht Details zurück zu navigieren, wenn ich muss.
Du wirst sehen, wie ich das etwas später benutze.
Also, zwei Dinge, die ich importieren muss: Params und Location.
Wir werden sehen, wie wir diese beiden in unserer Anwendung nutzen.
Also, zusammen mit diesem,
werden wir in und hier gehen, für den Konstruktor,
jetzt stellen wir fest, dass der Dish-Wert jetzt nicht von meiner Menükomponente verfügbar ist.
Aber stattdessen muss ich explizit gehen und das aus dem DishService holen.
Also, ich werde
den DishService auch in meine Schüssel Detail Komponente importieren.
Dish Service hier.
So wird es mir ermöglichen, ein bestimmtes Gericht aus dem Dish Service zu holen.
Sie erinnern sich also, dass wir bereits
die GetDish-Methode und den Dish Service haben, den wir nutzen können.
Nun, die nächste wichtige Sache für uns ist, die Dish ID zu bekommen.
Nun, wie bekommen wir die Dish ID.
Also, das ist, wo im Konstruktor.
Jetzt muss ich all diese Dienste zur Verfügung stellen,
also werde ich Dish Service sagen.
Dann ist die andere Location.
Also, Location ist ein weiterer Service, der mir zur Verfügung steht.
Also, beide werden in meiner Anwendung verwendet werden.
Also, wenn diese Gerichtenkomponente initialisiert
wird,
kann ich an dieser Stelle in der NGOnInit die Informationen über das spezifische Gericht aus den Params holen.
Also, wie machen wir das? Also,
das ist, wo ich die ID holen werde,
also würde ich sagen, plus das.
Um den Routenwert zu holen,
muss ich einen anderen Dienst namens ActivatedRoute-Dienst injizieren.
Das ist Teil der Angular-Router.
Dieser ActivatedRoute-Dienst bietet mir also Zugriff auf die Route hier.
Also, ich würde sagen,
also muss ich zusammen mit dem DishService auch eine weitere
als Route aufgerufene Route definieren, die hier der ActivatedRoute-Dienst wäre.
Also, all diese drei werden mir zur Verfügung stehen.
Also, genau da, kann ich nach
dieser Route fragen, Snapshot, Params.
Dieser Params ist ein Array, in
das ich mit der ID als Wert indizieren kann, also
Params-ID.
Wenn ich diese URL definiere,
wäre die URL dafür als Dishdetail definiert.
Beispiel: DishDetail 0,
DishDetail 1, DishDetail 2 usw.
So werden die URLs für diese Komponenten dort definiert.
Also, den Wert, den ich hier reinholen werde.
Jetzt, sobald ich die Idee des Gerichts ergriff, dann kann ich sagen,
dieses Gericht gleich DishService
und bekommen Gericht und die GetDish wird die ID als Parameter hier nehmen.
Wenn ich also auf ein Gericht in meiner Menükomponente klicke,
wird dieser Link, den ich den Router-Link habe, den ich dort eingerichtet habe, die Dish-ID an meinen Router als RouterParameter übergeben,
und der wird mir in
meiner DishDetail-Komponente zur Verfügung stehen, indem ich auf den ActivatedRoute-Dienst hier.
Also, sobald ich es ergriff,
dann kann ich diesen Wert verwenden, um das Gericht hier abzufragen.
Nun, das ist nicht die vollständige Art, Dinge zu tun.
Später im nächsten Modul
werden wir etwas namens Reactive JavaScript verwenden.
Dann werde ich zu diesem Zeitpunkt zurückkommen, um dies auf
eine andere Weise neu zu definieren, so dass meine DishDetail-Komponente
alle Änderungen verfolgen kann, die ich an meiner URL vornehme, und
automatisch die Informationen ändern kann, die von dieser Komponente angezeigt werden.
Wir werden dazu in einer der späteren Übungen im nächsten Modul kommen,
aber das funktioniert im Moment gut, also werden wir das verwenden.
Außerdem, wenn ich jetzt zu den Details des Gerichts gehe,
möchte ich in der Lage sein, vom Gericht zum Menü zurückzukehren.
Also werde ich in einer Zurück-Taste meiner Karte einen Zurück-Button hinzufügen,
der mich beim Drücken zum vorherigen Speicherort in meinem Browser zurückbringt.
Um dies zu tun, werde ich hier eine Methode namens GoBack hinzufügen,
die im Wesentlichen
den Standortdienst nutzt, den ich hier oben aufgenommen habe.
Der Location Service bietet eine Methode namens Back, mit
der ich zum vorherigen Element im Browserverlauf zurückkehren kann.
Auf diese Weise werde ich von den Details hier zurück zum Menü navigieren.
Also, diese GoBack-Methode wird hier hinzugefügt.
Jetzt müssen wir die DishDetail-Komponente hier reparieren.
Also, in der DishDetail-Komponenten-Vorlagendatei,
hier haben wir zwei Schaltflächen, die wie und Freigabe-Schaltfläche sind.
Ich werde hier einen weiteren Button hinzufügen.
Für diese Schaltfläche würde ich hinzufügen,
wenn auf diese Schaltfläche geklickt
wird, führt dies zu einem Aufruf der GoBack -Methode, die ich
gerade zu meiner DishDetail komponent.tsfile hinzugefügt habe.
Also, das wäre ein Zurück Button dort.
Während wir dabei sind,
könnten wir auch die Fußzeilenkomponenten Links auch beheben.
Also, gehen Sie zu der footercomponent.htmlDatei unten hier, wo wir diese Links haben,
Ich werde in den RouterLink hier mit
dem Parameter home für den ersten hinzufügen,
und dann Menü für die zweite,
und kontaktieren Sie uns für die dritte in der Fußzeile hier.
Speichern wir die Änderungen.
Wenn Sie nun auf das Menü klicken,
werden hier die Menüpunkte angezeigt.
Wenn wir auf einen der Menüpunkte klicken,
würden Sie feststellen, dass die Details des Gerichts hier in einer separaten Ansicht angezeigt werden.
Diese Details, wie Sie sehen können,
ist genau das, was die DishDetail-Komponente früher angezeigt wurde,
aber am unteren Rand des Menüs in der Menükomponente
haben wir jetzt, dass in einer separaten Ansicht angezeigt wird.
Nun, diese DishDetail-Komponente,
jetzt können Sie zurück zum Menü gehen, indem Sie auf die Schaltfläche Zurück klicken.
Wenn Sie also auf die Schaltfläche Zurück klicken,
sind Sie wieder im Menü.
Wenn Sie auf ein anderes Element klicken,
sehen Sie, dass die Details dieses bestimmten Elements hier angezeigt werden,
ähnlich für den dritten auch und dann können Sie zurückgehen.
Wenn Sie nun auf eines dieser Elemente klicken,
beachten Sie den Wert der URL in der Adressleiste.
Also, dies ist lokaler Host 4.200 Schrägstrich DishDetail Schrägstrich 0.
Diese Null ist die ID dieses Gerichts.
Also, dieser Wert wird übergeben,
und das ist, wie die DishDetail-Komponente hier gezeigt wird, gehen Sie zurück.
Wenn Sie auf das andere Element klicken,
können Sie sehen, dass jetzt in den URLs steht, DishDetail Schrägstrich 1.
In ähnlicher Weise
heißt es für den vierten Schrägstrich DishDetail 3 und so weiter.
Dieser Parameterwert ist also derjenige, der
der DishDetail-Komponente angibt, welches Gericht
von der DishDetail-Komponente angezeigt werden soll.
Das ist, was von der DishDetail-Komponente verwendet wird, um die Informationen zu
diesem bestimmten Gericht mithilfe der GetDishService -Methode abzurufen,
und dann werden diese Informationen in der Ansicht der DishDetail-Komponente angezeigt.
Also, jetzt in dieser Übung
haben wir gelernt, wie wir RouteParameters verwenden können, um Informationen an eine Komponente zu übergeben,
und dann erhält die Komponente Zugriff auf den Parameter und verwendet dann diesen RouteParameter,
um zu entscheiden, wie es
die Ansicht rendert oder die Informationen abruft und die Ansicht entsprechend rendert .
Damit schließen wir diese Übung ab.
Wir haben nun die Konstruktion unserer einseitigen Anwendung
für die Restaurant-Anwendung, an der wir bisher gearbeitet haben, fast abgeschlossen.
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht,
Single-Page-Anwendung Teil 2.