[MUSIC]
Mit dem Angular Router haben wir bereits gelernt, wie wir
mit der Router-Link-Direktive von einer Ansicht zur anderen navigieren können, um den Link anzugeben.
Und auch das Router-Modul, das uns mit der Spezifikation des Pfades ermöglicht,
zu den Ansichten der verschiedenen Komponenten zu navigieren.
Nehmen wir nun ein Beispiel für die dishdetail Komponente.
Bisher hat die dishdetail Komponente gearbeitet, indem sie die Details
des spezifischen Gerichts, das sie angezeigt werden muss, von der Menükomponente erhalten hat.
Dies wurde jedoch erleichtert, weil die dishdetail-Komponente eine Eigenschaft
hatte, die den Wert sendete.
Und dann benutzten wir den Eingabe-Dekorator für
die Variable innerhalb der dishdetail-Komponente, um diesen Wert zu erhalten, der
von der Menükomponente übergeben wurde.
Wenn diese Komponenten nun über einen Router an diese weitergeleitet werden,
besteht diese Verbindung zwischen den Komponenten nicht mehr.
Daher müssen wir den Angular Router nutzen, um
Informationen von einer Komponente an die andere Komponente weitergeben zu können.
Und dies geschieht normalerweise in Form von Parametern.
Parameter, die entweder als Routenparameter angegeben
werden können, wie wir ein wenig später lernen, oder Abfrageparameter.
Für den Angular Router haben wir
bisher gelernt, dass die Pfade alle als URL angegeben sind.
Angenommen, Sie müssen einen Parameterwert von einer Komponente an eine
andere Komponente übergeben.
Wie machen wir das dann?
Jetzt können Sie nur zwischen den Komponenten kommunizieren,
indem Sie die Routerverbindung verwenden.
und/oder um
das Router-Modul zu verwenden, um die Navigation von einer Komponente zu einer anderen Komponente durchzuführen.
Nun, hier ist die Möglichkeit, Parameterwerte innerhalb der URL für
eine Komponente, den Pfad für eine Komponente, anzugeben, ermöglicht es uns, diese Informationen zu übergeben.
Also, zum Beispiel, wenn wir in der Lage sein wollen, ein Gericht
mit einer ID 42 in der dishdetail Komponente anzuzeigen.
Wenn wir die Möglichkeit hätten, etwas wie /dishdetail/42.
Und dann lassen Sie das dishdetail die Nummer 42 direkt von der URL abholen.
Dann haben wir einen Mechanismus erleichtert, um diese Information
eine Komponente zu einer anderen Komponente zu vermitteln, wenn wir zu der anderen Komponente navigieren.
Dies ist, was in Angular Router Modul wird als Routenparameter bezeichnet.
Wie funktioniert ein Routenparameter?
Wenn Sie also einen Routenparameter in der Pfaddefinition angeben,
wird dieser Routenparameter mit einem Token angegeben.
Wenn Sie also den Pfad in der Pfadspezifikation für
die Routen angeben, würden Sie einen Pfad wie diesen angeben.
Also würden Sie sagen, dishdetail/:id.
Also, wo id das Token wird, das den
Route-Parameter zu der spezifischen Komponente trägt.
Die Komponente dishdetail in diesem Beispiel.
Auf diese Weise können Sie einen Routenparameter im Pfad angeben.
Und dann können Sie den Parameter von einem anderen Speicherort
an die bestimmte Komponente übergeben, die diesen Parameter benötigt.
Die Komponente dishdetail in diesem Beispiel.
Nun, die nächste wichtige Frage, die in Ihrem Kopf auftreten wird, ist,
wie wir diesen Routenparameter übergeben?
Nun, wenn Sie darüber nachdenken, wenn Sie durch die dishdetail Komponente navigieren.
Sie kommen von einer anderen Komponente aus, indem Sie entweder auf einen Link klicken oder
etwas namens navigieren Funktion verwenden, wie das Routenmodul für uns bereitstellt.
Wir betrachten beide Möglichkeiten, zu einer bestimmten Komponente zu navigieren.
Wenn Sie nun den Route-Parameter angeben müssen,
erinnern Sie sich, dass wir den Link mit der
Router-Link-Direktive in unseren Template-Dateien angegeben haben.
Nun, wenn Sie dies in den Vorlagendateien angeben,
dann nimmt der Routerlink auch ein Array ein, wie wir sehen.
Ein Link-Parameter-Array,
in dem Sie den Parameter explizit angeben können, der übertragen wird.
Also, zum Beispiel, in diesem Beispiel, das Sie hier sehen, geben wir ein.
und dann machen Sie ein ngFor.
Sie durchlaufen also eine Reihe von JavaScript-Objekten in
einem JavaScript-Objektarray.
Dann, wenn Sie die Routerverbindung angeben.
Dort können Sie also den Router-Link angeben.
Aber jetzt, umgeben von eckigen Klammern.
Und dies wird einen Wert wie dieser nehmen hat ein Link-Parameter-Array.
Hier können Sie also verschiedene Teile des Verknüpfungsparameters angeben.
Und Angular Router verbindet diese zusammen, um die eigentliche URL zu bilden.
Hier können Sie also sehen, dass der erste Teil des Linkparameters
hier als String angegeben wird, also /dishdetail hier.
Aber der zweite Teil wird als Wert angegeben, der
von der Schale erhalten wird.
Welches ist das Gericht, das JavaScript-Objekt aus dem JavaScript-Objekt-Array hier.
So wird jedes Gericht eine dish.id tragen.
So kann die dish.id als
einer der Werte innerhalb dieses Linkparameter-Arrays hier angegeben werden.
Wenn Sie also darauf klicken,
wird diese dish.id für das spezifische Gericht durch die spezifische ID für das Gericht ersetzt.
Wenn zum Beispiel die ID 42 ist, wird dies durch 42 ersetzt.
Wenn also der Angular Router diesen Router-Link empfängt,
wird er die URL als /dishdetail/42.
Die 42 ist der Wert der dish.id an dieser Stelle.
So können Sie Parameter übergeben.
Der zweite Teil der Frage
ist natürlich, wie ruft die Komponente diesen Wert aus dem Linkparameter ab?
Über das wir in der nächsten Folie sprechen werden.
Eine andere Möglichkeit, dass Sie diese Navigation zu der anderen Komponente verursachen können,
ist auch die Verwendung einer Methode namens navigieren, die vom Routermodul bereitgestellt wird.
So können Sie sagen, this.router.navigieren.
Dies kann also in Ihrem TypeScript-Code oder
Ihrem JavaScript-Code enthalten sein, um automatisch die Navigation zum anderen zu verursachen.
Dies könnte also in einer Methode enthalten sein, die Sie
in den TypeScript-Code Ihrer Komponente einschließen.
Und das kann von Ihrer Vorlage aufgerufen werden.
Sagen Sie zum Beispiel, indem Sie dort auf einen Link klicken.
Also innerhalb des Codes können Sie eine Anweisung wie diese einfügen,
this.router.navigieren.
Und diese Navigations-Methode verwendet das gleiche Link-Parameter-Array
wie der Parameterwert.
Dadurch können diese Informationen auch dem Angular Router zur Verfügung gestellt werden
, so dass er zu der anderen Komponente navigieren kann.
Gehen wir auf die andere Seite dieser Gleichung.
Wie
ruft eine Komponente, wie die dishdetail-Komponente in diesem Beispiel, diesen Wert ab, der als Token im URL-Link angegeben ist?
Jetzt stellt die Angular Router-Bibliothek
einen Dienst bereit, der als ActivatedRoute-Dienst bezeichnet wird.
Dieser ActivatedRoute-Dienst kann genutzt werden, um
diese Werte abrufen zu können.
Um diesen Parameterabruf zu erleichtern,
bietet der ActivatedRoute-Dienst nun drei verschiedene Dinge.
Beispielsweise stellt es diese Methode zum Abrufen der URL bereit.
Welches ist eine beobachtbare der Route Pfad.
Was als ein Array von Strings für jeden Routenpfad dargestellt wird.
Sie haben dieses Wort hier beobachtbar gefunden.
Halten Sie sich im Moment an diesem Wort fest.
Wir werden zurückkommen, schauen, was ein Beobachtbares im nächsten Modul ist.
Aber im Moment haben wir erkannt, dass dieser
ActivatedRoute-Dienst dies beobachtbar bietet.
In ähnlicher Weise stellt der ActivatedRoute-Dienst auch eine andere beobachtbare namens params bereit.
Diese Parameter beobachtbaren stellt einer Komponente
die Parameterwerte zur Verfügung, die als Routenparameter übergeben werden.
Also diese Parameter beobachtbar ist derjenige, den wir verwenden werden,
um diesen Wert innerhalb der dishdetail-Komponente abzurufen.
In der Übung, die dieser Vorlesung folgt, werden Sie die genaue Methode sehen.
Ebenso können Sie Abfrageparameter auch an eine andere Komponente übergeben.
Jetzt werden wir uns nicht mit einem Beispiel der Abfrageparameter beschäftigen.
Später können wir jedoch ein Beispiel dafür finden, wie Sie
Abfrageparameter über den ActivatedRoute-Dienst an eine andere Komponente übergeben können.
Mit diesem Verständnis gehen wir zur nächsten Übung.
Wir werden die einseitige Anwendung weiter entwickeln.
Aktivieren Sie dann die Verwendung eines Routenparameters, um
die ID eines Gerichts an die dishdetail-Komponente zu übergeben.
Damit die dishdetail Komponente wiederum diese ID verwenden kann, um den Geschirrservice abzufragen.
Um die Details dieses speziellen Gerichts
zu erhalten, das es in seiner Ansicht anzeigen soll.
( MUSIK)