Jetzt, da wir die Datenbindung untersucht haben,
nutzen wir sie für die
Arbeit an der Angular-Anwendung, die wir bisher verwendet haben.
In der vorherigen Version der Angular-Anwendung
hatten wir das Menü gerendert,
und dann hatten wir ein bestimmtes Gericht, das unten gezeigt wurde.
Nun möchten wir idealerweise, dass der Benutzer
auf einen der Menüpunkte und dann auf die Details klicken kann, die dem Benutzer angezeigt werden sollen.
Hier hilft uns die Verwendung der Datenbindung,
unsere Anwendung zu implementieren, um diese Art von Funktion zu ermöglichen. Wenn wir in
den aktuellen Zustand unserer Anwendung im Browser gehen,
können wir jetzt sehen, dass wir unser Menü haben und unten
haben wir die Details eines bestimmten Gerichts, das dort gezeigt wird.
Nun, das ist gut und gut für den Anfang, aber im Idealfall,
was wir möchten, ist, dass, wenn der Benutzer auf eines dieser Gerichte klickt,
wir in der Lage sein wollen, die Details des Gerichts unten im Menü hier anzuzeigen.
Daher möchten wir, dass die Details des Gerichts geändert werden,
basierend auf dem spezifischen Gericht, auf das wir jederzeit klicken.
Also, wie erreichen wir das?
Also, hier kommt die Verwendung von Datenbindung zu unserer Rettung. Wenn Sie
zu unserer Anwendung gehen,
ist das erste, was ich tun werde, im freigegebenen Ordner,
jetzt erkennen Sie, dass die Gerichteninformationen
sowohl in der Menükomponente als auch in der Dish Detailkomponente verwendet werden.
Wenn Sie nun Informationen wie diese freigegeben haben,
wäre es eher bequemer, einen zentralen Ort zu haben
, von dem aus diese Informationen an beide Komponenten geliefert werden.
Um mir zu helfen, das zu tun,
gehe ich zum Freigabeordner und erstelle dann eine neue Datei,
und dann werde ich diese Datei als dishes.ts benennen.
In dieser Datei dishes.ts
werde ich die Konstante erstellen, die die Details des Geschirrs liefert.
Um das zu tun,
würde ich zuerst das Gericht importieren,
aus der Geschirrklasse
, die ich bereits zuvor definiert habe.
Also jetzt kann ich eine
Konstante definieren, die als Gerichte vom Typ ein Gericht Array genannt
wird, und dann werde ich hier die Details aller meiner Gerichte speichern.
Jetzt, in der früheren Version der Anwendung,
haben wir die Verwendung der Gerichte gesehen und wir sahen
das JavaScript-Objekt-Array, das die Details der Gerichte enthält.
Jetzt werden wir all diese Inhalte und mit einer aktualisierten Version davon verschieben.
Also, eine aktualisierte Version der Gerichte
JavaScript-Objekt-Array wird Ihnen in den Anweisungen gegeben,
also gehen Sie einfach und kopieren Sie
das gesamte JavaScript-Objekt-Array von dort und dann fügen wir es hier ein.
Dies wird also der zentrale Ort, von dem aus
die Geschirr Informationen zu Ihrer Anwendung geliefert werden.
Ich habe jetzt die Details des
Gerichts geschnitten und eingefügt, die in den Übungsanweisungen gegeben sind hier,
und so habe ich vier Gerichte hier ein,
zwei drei und vier Gerichte geklebt hier,
und jedes dieser Gerichte enthält natürlich
die Details des spezifischen Gerichts und auch Kommentare für das Gericht.
Auf diese Weise
wird das Rendern der Informationen in der Schüsseldetailvorlage für jedes dieser ausgewählten Gerichte unkompliziert.
Nun, wenn Sie zurückrollen, werden Sie sehen, dass es hier einige rote Linien gibt.
Der Grund für diese roten Linien liegt darin, dass Sie beim Betrachten des Dish-Objekts
sehen, dass wir im Dish-Objekt keine Eigenschaft haben, die als Kommentare bezeichnet wird.
Also, wir müssen eine neue Eigenschaft namens
Kommentare erstellen, um in dieses Gericht hier hinzuzufügen. Also, wie machen wir das?
Also, um das zu tun, werden wir Kommentare sagen und
dann würde ich sagen Kommentarfeld hier.
Jetzt sofort erkennen Sie, dass es kein Kommentararray für uns zur Verfügung steht,
also müssen wir dieses Kommentararray erstellen.
Also, was ich tun werde, ist, dass ich eine andere JavaScript-Klasse erstellen werde
, die die Details des Kommentars dort enthält.
Also, um das zu tun, werde ich zuerst Kommentar aus
der Kommentarklasse hier importieren.
Jetzt sagt mir die rote Linie sofort, dass ich keine Kommentarklasse habe.
Also, wie fügen wir eine Kommentarklasse hinzu?
Also gehen wir in den freigegebenen Ordner,
erstellen wir eine neue Datei namens comment.ts und in diesem comment.ts,
definieren wir hier eine Klasse namens Kommentar.
Jetzt müssen wir bestimmte Eigenschaften für diese Kommentarklasse definieren.
Also, was sind die Eigenschaften, die wir haben?
Werfen wir einen kurzen Blick auf unsere Datei dishes.ts
und dann werden wir sehen, was die Eigenschaften für jeden Kommentar sind. Wenn Sie
zur Datei dishes.ts gehen,
sehen Sie, dass die Kommentare
eine Eigenschaft enthält, die als Bewertung bezeichnet wird, die eine Zahl zu sein scheint,
dann haben Sie einen Kommentar, der eine Zeichenfolge und einen
Autor ist, der eine Zeichenfolge und ein Datum ist, das auch eine Zeichenfolge ist.
Also, wir müssen hier vier Eigenschaften für meine Kommentarklasse definieren.
Also, wenn ich zurück zur Kommentarklasse gehe,
würde ich die Bewertung als Zahl definieren.
Also, im Typ Skript,
alles ist eine Zahl hier, dann hatten wir einen Kommentar, der ein String-Autor
ist, der auch eine Zeichenfolge ist,
und dann Datum, das auch eine Zeichenfolge hier ist.
Also, das sind die vier Eigenschaften, die wir hier haben.
Nun, offensichtlich haben wir gesehen, wie wir die Datumszeichenfolge in der vorherigen Übung verwenden,
und in der Zuweisung, wie wir
die Datumszeichenfolge verwendet haben, um dort das Datum für den Kommentar anzuzeigen.
Nun, für den Fall, dass Sie sich fragen,
was enthält diese Datumszeichenfolge tatsächlich? Wenn Sie
hier gehen, werden Sie sehen, dass diese Datumszeichenfolge ein bestimmtes Format hat.
Dies ist also das Standardformat zum Speichern eines Datums hier.
Dieses Datumsformat ist die ISO-OSI-Methode, um das Datumsformat anzugeben.
Also, wir werden das nur verwenden,
also ist dies ein standardisiertes Format, das auch in
vielen Programmiersprachen verwendet wird, mit dem Sie die Daten hier als String speichern können,
also werde ich es hier nur als solches nutzen.
Nachdem wir
hier die Änderungen an der Datei dish.ts vorgenommen haben und dann auch die Kommentarklasse hier hinzugefügt
haben, sehen wir jetzt, dass die Datei dishes.ts diese roten Linien nicht mehr hat, da
der Kommentar als Objekt-Array zu meiner Dish-Klasse hier hinzugefügt wurde.
Also, das funktioniert bis jetzt gut.
Nun, wie nutzen wir das?
Nun, um dies zu nutzen,
werden wir zum Menü component.ts gehen,
und dann haben wir hier diese Konstante definiert.
Nun, das ist nicht der richtige Weg, es
später zu tun, werden Sie sehen, wie ich einen Dienst für all das benutze.
Also, lassen Sie mich diese Konstante von hier komplett ausschneiden und anstatt diese Konstante
zu verwenden, werde ich jetzt Gerichte
aus dem freigegebenen Ordner
hier importieren, gemeinsame Gerichte hier.
Beachten Sie also, dass dieser Geschirr Ordner die Gerichte Konstante hier exportiert.
Also, das ist der Grund, warum wir es nutzen können.
Also, wenn ich zu den Gerichten hier zurückgehe,
muss ich das von hier exportieren,
also würde ich sagen, Export.
Konstante. Also, wenn ich das mache,
dann sehe ich in meiner Menükomponente, dass meine Gerichte hier richtig importiert werden können.
Dann wird der Rest des Codes hier problemlos ohne Änderungen funktionieren.
Sie werden sehen, dass, wenn Sie die Werte jetzt
und dann, wenn Sie sich Ihre Webanwendung im Browser ansehen,
es gut rendert, auch nach diesen Änderungen.
Nachdem Sie alle Änderungen gespeichert haben, die Sie bisher in allen Dateien vorgenommen haben,
wenn Sie sich Ihre Webseite ansehen, wird
Ihre Webseite wie zuvor gerendert.
Nun, der zweite Teil des Problems.
Wir wollen in der Lage sein, zu kommunizieren.
Wenn wir auf einen dieser Menüpunkte klicken,
möchten wir in der Lage sein, diese Informationen so zu kommunizieren, dass
das entsprechende Gericht hier gerendert wird.
Also, hier werden wir die Hilfe der
Datenbindung nehmen, die wir bisher gelernt haben.
Zurück zu der Menükomponenten-Vorlagendatei,
was wir tun werden, ist, dass für
diese „app-dishdetail“, die Sie am unteren Rand hier,
um in der Schüssel Detail Komponenten Vorlage hinzufügen, um die Menükomponenten-Vorlage,
werden wir in eine Eigenschaft namens Dish hinzufügen.
Dann werden wir dies zuweisen „selectedDish“.
Sie werden sich daran erinnern, dass das ausgewählte Gericht eine Variable ist, die wir
in unserem Menü Komponenten TypeScript Datei hier definiert haben.
Also, auf diese Weise; dieser Wert dieses ausgewählten Gerichts
wird hier durch diese Eigenschaft Gericht übergeben.
Jetzt werden wir sehen, wie die Komponente „Detail“ diese Informationen abrufen kann
und sie dann im nächsten Schritt in der Übung gut nutzen kann.
Nun, während wir hier sind,
werden wir auch das andere Problem beheben, mit dem wir uns befassen müssen.
Das heißt, wenn eines der Menüelemente geklickt wird,
dann wird es ein Click-Ereignis erzeugen und wir möchten, dass diese Informationen
an unsere Menükomponente TypeScript-Datei geliefert werden.
Also, um das zu tun, gehen wir in Menürasterlisten, die wir hier definiert haben.
Für diese Grid-Kachel hier,
was ich tun werde, ist, das Click-Ereignis hier zu definieren.
Also, für das Click-Ereignis,
was ich tun werde, ist,
dass ich die Auswahlmethode aufrufen werde, die ich in meiner Menükomponente.ts-Datei definieren werde.
Zu dieser onSelect Methode
werde ich das Gericht als Parameter hier liefern.
Was ist das für ein Gericht?
Dieses Gericht ist genau dieses Gericht, das Sie in
diesem „Gericht lassen“ in der NGFor Syntax hier ausgewählt haben.
Also, dieses spezielle Gericht,
aus der Reihe von Gerichten, die Sie hier ausgewählt haben,
wird als Parameter an diese onSelect Methode übergeben,
was wir in unserer Menükomponente.ts Datei implementieren werden.
Also, jetzt, da wir dies getan haben,
ist dies der Handler, der implementiert werden muss.
Lassen Sie uns auf die Menükomponentendatei gehen und dann
diese Datei reparieren, um diesen Handler dort zu implementieren.
Wenn Sie also einen Klick auf einen der Menüpunkte machen,
wird der entsprechende Handle aufgerufen und
die spezifischen Gerichteninformationen werden hier als Parameter übergeben.
Gehen Sie zu Menü component.ts Datei, jetzt,
wird dem ausgewählten Gericht ein Wert zugewiesen, basierend auf dem Gericht, das ich wählen.
Also, ich werde diesen Teil entfernen und dann direkt unten hier
werde ich die onSelect Methode hier implementieren.
Also, für die OnSelect Methode,
wird dies einen Parameter erhalten, der der Dish Parameter ist.
Wenn dieser Dish-Parameter hereinkommt,
werde ich diesen SelectedDish gleich dish zuweisen,
den Parameter, der hier als Wert für die onSelect -Methode eintrat.
Also, das ist es.
Wenn Sie also auf eines dieser Elemente im Menü klicken, auf
eines der Gerichte im Menü,
werden diese Gerichte Informationen durch diese weitergegeben und dann
wird das ausgewählte Gericht diesem Gericht zugewiesen.
Jetzt haben wir, wie die Informationen aus dem DOM kommen.
Der spezifische Klick führt dazu, dass
uns die Gerichteninformationen zur Verfügung stehen und dem ausgewählten Gericht wird dieser Wert zugewiesen.
Nun, zurück zu der Menükomponente HTML-Datei,
sehen wir, dass wir bereits diese Dish Eigenschaft SelectedDish zugewiesen haben.
Auf diese Weise wird dieser ausgewählte Dishwert
durch diese Dish-Eigenschaft an dieses app-dishdetail hier übergeben.
Nun, wie bekommt meine Gericht-Detailkomponente diese Informationen?
Dafür gehen wir zum Gericht Detail Komponente und beheben das.
Gehen Sie zu der Schüssel Detailkomponente,
das erste, was ich tun werde, ist
dieses Gericht Konstante aus meiner Schüssel Detailkomponente löschen.
Ich brauche es nicht mehr.
Nun, wenn eine Eigenschaft gebunden wird,
wie das, was wir in der Menükomponente HTML-Datei gesehen haben,
dann
kann ich in meiner Dish Detaildatei ein anderes Modul verwenden, das als Eingabemodul bezeichnet wird.
Dann, für dieses Gericht,
werde ich das einfach als DISH erklären.
Nun, dieses Eingabemodul ermöglicht es mir, einen Dekorator
für diese Dish Variable zu deklarieren, die ich hier definiert habe
, bei Eingabe mit der Klammer hier zu diesem Gericht hier.
Dann muss ich auch
die Gericht Klasse
aus dem gemeinsamen Gericht hier importieren.
Also, damit, was passiert ist, ist, dass ich das Eingabemodul verwende.
Auf diese Weise können Sie Informationen aus einer anderen Komponente in eine Komponente liefern.
Sie binden eine Eigenschaft in der Vorlage
der anderen Komponente, wie wir im Menü component.html Datei gesehen haben,
und dann wird das als Eingabe für diese Komponente verfügbar sein, indem Sie
eine Variable deklarieren und dann Eingabe-Dekorator dafür aufrufen.
Lassen Sie uns nun die Änderungen an allen Dateien speichern, die wir vorgenommen haben
und dann einen Blick auf die Winkelreplikation werfen. Wenn wir in
unseren Browser gehen,
sehen wir, dass in dieser Angular-Replikation
hier nichts angezeigt wird.
Denn gerade jetzt, das ausgewählte Gericht,
haben wir keines der Gerichte ausgewählt, so dass auch das ausgewählte Gericht
ist ein leeres Objekt dort.
Also verwenden wir das NGIF in der Vorlage für das Gericht Detail. Wenn Sie
sich also einen kurzen Blick auf die Schüsseldetailvorlage werfen,
haben Sie dies als Teil Ihrer Aufgabe implementiert.
Also sollten Sie das nGIF mit dem Gericht sowohl für den Code
als auch für die MD-Liste dort verwenden.
Also, wenn Sie das tun,
dann, wenn das Gericht derzeit nicht ausgewählt ist,
wird unten nichts angezeigt.
Aber in dem Moment, in dem ich auf eines der Gerichte klicke,
sehen Sie sofort die Details des Gerichts, das hier unten angezeigt wird.
Jetzt kann ich das zweite Gericht auswählen und dann sofort
werden Sie feststellen, dass die unten angezeigten Gerichtendetails geändert werden.
Also, jedes Mal, wenn ich auf eines dieser Gerichte klicke,
werden die Details dieses spezifischen Gerichts, einschließlich der Kommentare, unten hier angezeigt.
Das ist also genau das, was wir in dieser speziellen Übung erreichen wollen.
Hier haben Sie also die Verwendung von Datenbindung gesehen, drei verschiedene Arten,
einschließlich der Ereignis- und Ereignisbehandlungsroutine,
und Sie haben auch gesehen, wie wir das Eingabemodul nutzen können, um
Informationen in eine Komponente abrufen zu können, die von einer anderen Komponente eingeht.
Damit schließen wir diese Übung ab,
in der wir gelernt haben, verschiedene
Datenbindungsfunktionen in Angular zu nutzen, um unsere Anwendung zu implementieren.
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachrichtendatenbindung zu machen.