Es ist Zeit, mit der allerersten Aufgabe in diesem Kurs zu beginnen.
In dieser Zuweisung werden Sie mit Winkelkomponenten arbeiten.
Sie werden eine neue Komponente namens dishdetail erstellen,
um sie in Ihre Winkelanwendung hinzuzufügen,
und Sie werden die Vorlage aktualisieren, so dass sie die Details eines bestimmten Gerichts anzeigt.
Früher haben wir in der vorherigen Übung eine Karte in unsere Menükomponente eingeführt.
Wir werden diese Karte entfernen und stattdessen die
dishdetail-Komponente anstelle dieser Karte einschließen, damit die
dishdetail-Komponente ihre Informationen
in diesem Teil des Bildschirms anzeigen kann.
Ihre erste Aufgabe besteht darin, die dishdetail Komponente zu erstellen.
Am Ende der ersten Aufgabe, nachdem Sie die dishdetail Komponente erstellt haben,
werden Sie in der Menükomponenten-Vorlagendatei diese Karte durch den Selektor
der dishdetail Komponente dort ersetzen,
so dass die Details der dishdetail Komponente
rechts angezeigt werden unter dem Menü in der Menükomponente.
Wir haben bereits gesehen, wie Sie diesen
Selektor von einer Komponente in eine andere Komponente hinzufügen können.
Als wir die Menükomponente erstellt
haben, haben wir diese in die App-Komponente aufgenommen,
so dass dies am Ende der ersten Aufgabe das Ergebnis in Ihrem Browser sein würde
, wo anstelle der Karte, die die Details des Gerichts anzeigt,
diese Worte namens „dishdetail works!“ am unteren Rand der Seite.
Sobald Sie dies abgeschlossen haben, laden Sie
eine vorkonfigurierte dishdetail-Komponenten-Vorlagendatei mit einigen fehlenden Teilen herunter
und ersetzen Sie dann in der Vorlage Ihrer dishdetail-Komponente.
Sobald Sie die Vorlage der bereitgestellten dishdetail-Komponente ersetzen,
sehen Sie die Seite wie folgt aktualisiert.
Also, Sie werden zwei Teile auf der Seite hier sehen, einer, der sagt:
„Zeigen Sie die Details des Gerichts hier an.“
Sie werden eine Kartenkomponente verwenden, um die Details des Gerichts zu erstellen
und dieses Gericht hier anzuzeigen.
Darüber hinaus werden Sie
hier auch eine Reihe von Kommentaren über das Gericht im zweiten Teil dieser Komponente anzeigen.
Nun, um Sie in den Zuweisungsanweisungen zu beginnen,
habe ich Ihnen ein neues JavaScript-Objekt geliefert,
das die Details des Gerichts enthält,
einschließlich der Kommentare zu diesem Gericht.
Sie werden diese Informationen verwenden, um
diese beiden zu konstruieren: die Kartenkomponente, um
die Details des Gerichts anzuzeigen, und die Liste der Kommentare hier.
Ihre zweite Aufgabe besteht darin, Ihre
TypeScript-Datei so zu aktualisieren, dass sie die neue Dishvariable darin enthält,
und dann die Dishvariable mit der Kartenkomponente zu verwenden
und dann die Kartenkomponente hier vorzubereiten, um die Details des Gerichts anzuzeigen.
Sobald Sie die zweite Aufgabe abgeschlossen haben,
werden Sie in Ihrer Anwendung sehen, dass
Sie direkt unter dem Menü die Details der
gegebenen Gerichteninformationen in einer Karte wie dieser hier angezeigt werden,
so dass Sie den Titel, das Bild
und auch die Beschreibung unten sehen können.
Nun, nachdem Sie dies abgeschlossen haben, gehen Sie mit der dritten Aufgabe über.
In der dritten Aufgabe verwenden Sie die Kommentare, die auch in der
Schale enthalten sind, die wir Ihnen im JavaScript-Objekt zur Verfügung gestellt haben,
und verwenden Sie diese dann, um eine Liste von Kommentaren hier zu erstellen und anzuzeigen.
Am Ende der dritten Aufgabe
sehen Sie das, was auf der rechten Seite Ihres Gerichts angezeigt wird.
Sie können sehen, dass Sie hier eine Kopfzeile mit
dem Wort „Kommentare“ haben,
und dann haben Sie eine Liste von Kommentaren, die hier angezeigt werden.
Die Informationen für die Konstruktion dieser Kommentare sind im
Gericht JavaScript-Objekt verfügbar, das wir für Sie gegeben haben.
Beachten Sie insbesondere, dass dies der eigentliche Kommentar ist,
dies ist die Anzahl der Sterne, die
diesem Kommentar gegeben werden, und hier zeigen wir den Namen des Autors mit zwei Bindestrichen vor,
und beachten Sie, am Ende, wir zeigen das Datum hier.
Um dieses Datum hier konstruieren zu können,
müssen Sie eine Winkelleitung namens Date verwenden.
Wir haben bereits die Verwendung einer eingebauten Pipe namens Großbuchstaben
in der vorherigen Übung gesehen,
so dass Sie einfach die Date-Pipe verwenden, um dieses
Datum zu erstellen, das rechts neben dem Namen des Autors hier angezeigt wird.
Also, das sind die Hinweise, um Sie mit
dieser dritten Aufgabe in Ihrem ersten Auftrag beginnen zu lassen.
Viel Spaß beim Abschluss des ersten Auftrags.
Unabhängig von den Ressourcen,
die Sie benötigen, die vorkonfigurierte halbvollständige Vorlagendatei
und das JavaScript-Objekt sind beide
in den Anweisungen für diese Zuweisung verfügbar.