1 00:00:03,650 --> 00:00:11,280 Es ist an der Zeit, mit unserer nächsten Übung fortzufahren, wo wir die Komponenten noch einmal untersuchen werden. 2 00:00:11,280 --> 00:00:15,600 Wir werden die Vorlage für 3 00:00:15,600 --> 00:00:20,670 die Menükomponente ändern, die wir bereits in unsere Angular-Anwendung aufgenommen haben, 4 00:00:20,670 --> 00:00:30,580 indem wir eine neue Art von Materialkomponente verwenden, um unser Menü auf eine andere Weise zu gestalten. 5 00:00:30,580 --> 00:00:36,625 Dabei werden wir uns auch mit der Verwendung der NGif-Strukturrichtlinie beschäftigen. 6 00:00:36,625 --> 00:00:40,790 Wenn ich zur Vorlagendatei unserer Menükomponente gehe, 7 00:00:40,790 --> 00:00:44,685 werde ich einige Änderungen an dieser Vorlagendatei vornehmen. 8 00:00:44,685 --> 00:00:47,900 Zuerst werde ich hier 9 00:00:47,900 --> 00:00:56,170 mit FxFlex ein anderes div hinzufügen und dann dieses div dort schließen. 10 00:00:56,170 --> 00:01:01,245 Also, beachte, dass 11 00:01:01,245 --> 00:01:03,050 ich jetzt in meinem äußeren div zwei divs hier habe. 12 00:01:03,050 --> 00:01:07,855 Also, einer mit dem div und der zweite mit der leeren Liste. 13 00:01:07,855 --> 00:01:15,880 Also, dies sind zwei Teile von Inhalten, die auf dem Bildschirm ausgelegt werden müssen. 14 00:01:15,880 --> 00:01:19,450 Aber beachten Sie, dass ich das FxLayout angegeben habe, das gefärbt werden soll. 15 00:01:19,450 --> 00:01:21,590 Also, was bedeutet, dass diese beiden Teile des 16 00:01:21,590 --> 00:01:24,445 Inhalts übereinander gelegt werden, 17 00:01:24,445 --> 00:01:27,025 übereinander gestapelt werden. 18 00:01:27,025 --> 00:01:29,370 Also, im ersten div, 19 00:01:29,370 --> 00:01:32,330 werde ich hier ein wenig Inhalt enthalten. 20 00:01:32,330 --> 00:01:38,570 Also, ich werde ein anderes div hier drinnen setzen. 21 00:01:38,570 --> 00:01:42,005 Später werde ich mehr in dieses div hinzufügen. 22 00:01:42,005 --> 00:01:50,625 Aber im Moment werde ich nur ein h3 mit dem Menüpunkt dort haben 23 00:01:50,625 --> 00:01:56,875 und dann ein horizontales Linienelement zu diesem Menü hinzufügen. 24 00:01:56,875 --> 00:02:02,780 Dies wird also den Titel für 25 00:02:02,780 --> 00:02:08,900 diese bestimmte Seite direkt oben in meiner Anwendung geben, wenn sie gerendert wird. 26 00:02:08,900 --> 00:02:12,395 Also, das ist eine Modifikation. 27 00:02:12,395 --> 00:02:14,070 Jetzt für den zweiten Teil, 28 00:02:14,070 --> 00:02:16,435 anstatt den mat-list-item 29 00:02:16,435 --> 00:02:21,830 zu verwenden, werde ich jetzt die Hilfe einer Mat-Grid-Liste nehmen. 30 00:02:21,830 --> 00:02:26,000 Mat-Grid-Liste ermöglicht es mir, den Inhalt 31 00:02:26,000 --> 00:02:30,625 als Raster von Elementen anstatt als Liste von Elementen zu erstellen. 32 00:02:30,625 --> 00:02:38,220 Wir haben gesehen, wie das Menü mit der Liste der Elemente in der vorherigen Übung ausgelegt wurde. 33 00:02:38,220 --> 00:02:41,810 Nun möchte ich das gleiche Menü auf eine andere Weise ein 34 00:02:41,810 --> 00:02:45,615 bisschen attraktiveres Layout für das Menü anlegen. 35 00:02:45,615 --> 00:02:48,140 Also, anstatt die Mat-Liste 36 00:02:48,140 --> 00:02:52,520 zu verwenden, werde ich dies jetzt von Mat-Liste zu einer Mat-Grid-Liste ändern. 37 00:02:52,520 --> 00:02:54,005 Also, bevor ich das mache, 38 00:02:54,005 --> 00:03:03,645 werde ich dies auch in ein anderes div einschließen, auf das ich den FxFlex hier anwenden werde, 39 00:03:03,645 --> 00:03:10,320 so dass die Mat-Grid-Liste sich dort befindet. 40 00:03:10,320 --> 00:03:14,540 Also, das wird mir mehr Flexibilität geben, 41 00:03:14,540 --> 00:03:19,180 um Elemente zu dieser bestimmten Einheit hinzuzufügen, wenn ich später brauche. 42 00:03:19,180 --> 00:03:23,505 Die Rasterliste nimmt nun einen Parameter namens 43 00:03:23,505 --> 00:03:28,450 Spalten, der angibt, wie viele Spalten dieses Raster enthalten sollen. 44 00:03:28,450 --> 00:03:35,540 Im Moment werde ich die Spalten als zwei angeben, weil ich nur vier Elemente in meinem Menü habe. 45 00:03:35,540 --> 00:03:37,290 Also, zwei Spalten sind ausreichend. 46 00:03:37,290 --> 00:03:41,995 Also habe ich wenigstens zwei Reihen des Rasters dort. 47 00:03:41,995 --> 00:03:45,770 Dies nimmt auch einen anderen Parameter namens 48 00:03:45,770 --> 00:03:50,010 RowHeight oder ein Attribut namens RowHeight, 49 00:03:50,010 --> 00:03:56,650 das ich hier als 200 Pixel angeben werde. 50 00:03:56,680 --> 00:04:03,630 Also, das würde die Mat-Grid-Liste vervollständigen, die ich innerhalb des div dort habe. 51 00:04:03,630 --> 00:04:09,120 Jetzt, sobald ich die Änderung vorgenommen habe, dann 52 00:04:09,120 --> 00:04:12,700 werde ich eingehen und 53 00:04:12,700 --> 00:04:15,045 anstelle des mat-list-Elements verwenden, 54 00:04:15,045 --> 00:04:20,450 wird dies jetzt eine Mat-Grid-Kachel hier sein. 55 00:04:20,450 --> 00:04:22,480 Also, die Gitterkachel. 56 00:04:22,480 --> 00:04:24,580 Grundsätzlich Kacheln des Gitters. 57 00:04:24,580 --> 00:04:27,350 Diese Gitterfliese, wie Sie erkennen, 58 00:04:27,350 --> 00:04:31,200 werde ich über die Liste der Gerichte iterieren. 59 00:04:31,200 --> 00:04:35,090 Also verwende ich immer noch meine ngFor-Direktive damit. 60 00:04:35,090 --> 00:04:38,510 Diese Mat-Grid-Kachel schließt nun 61 00:04:38,510 --> 00:04:43,095 den Inhalt ein, der in jeder Kachel meines Gitters angelegt wird. 62 00:04:43,095 --> 00:04:45,320 Jetzt, in der Kachel, 63 00:04:45,320 --> 00:04:49,105 werde ich das Bild so verwenden, wie es existiert. 64 00:04:49,105 --> 00:04:53,990 Aber ich werde das Bild verwenden, 65 00:04:53,990 --> 00:04:58,750 nicht mit dem MatliListAvatar, weil das hier nicht angewendet werden kann, und stattdessen 66 00:04:58,750 --> 00:05:04,720 werde ich die Höhe für das Bild als 200 Pixel angeben. 67 00:05:04,720 --> 00:05:09,230 Dies entspricht also der Zeilenhöhe, so dass mein Bild 68 00:05:09,230 --> 00:05:14,325 die gesamte Höhe meiner Kachel dort dehnt. 69 00:05:14,325 --> 00:05:16,830 Also, Bildhöhe, 200 Pixel, 70 00:05:16,830 --> 00:05:20,190 und die Quelle und die Alt bleiben als solche. 71 00:05:20,190 --> 00:05:22,745 Dann, der nächste Teil, 72 00:05:22,745 --> 00:05:24,830 anstelle des h1, 73 00:05:24,830 --> 00:05:33,880 werde ich diesen ändern, um 74 00:05:33,880 --> 00:05:39,710 in Mat-Gitter-Fliesen-Fußzeile eingeschlossen zu werden. 75 00:05:41,780 --> 00:05:49,770 Also, was auch immer Inhalt hier ist, wird in der Mat-Grid-Kachel-Fußzeile hier erscheinen. 76 00:05:49,770 --> 00:05:54,035 Jetzt, da drin kann ich angeben, welchen Inhalt ich will. 77 00:05:54,035 --> 00:05:57,295 Also, für die Gitterkachel 78 00:05:57,295 --> 00:06:00,170 ist die vollständige Beschreibung ein bisschen zu viel. 79 00:06:00,170 --> 00:06:02,245 Also, ich werde diese Beschreibung entfernen, 80 00:06:02,245 --> 00:06:05,765 und stattdessen nur die h1 dort verwenden. 81 00:06:05,765 --> 00:06:12,355 Nun, zusätzlich werde ich hier die Hilfe eines Winkelrohrs nehmen. 82 00:06:12,355 --> 00:06:16,340 Die Pipe, die ich darauf anwenden werde, wie Sie sehen können, 83 00:06:16,340 --> 00:06:22,095 ist das Rohr die vertikale Leiste auf Ihrer Tastatur. 84 00:06:22,095 --> 00:06:25,440 Dann werde ich die Großbuchstaben Pipe verwenden. 85 00:06:25,440 --> 00:06:27,175 Also, was macht diese Pfeife? 86 00:06:27,175 --> 00:06:32,795 Diese Pipe, die Großbuchstabe, verwandelt den Namen des Schüssels aus dem, 87 00:06:32,795 --> 00:06:39,015 was auch immer es ist, in ein ganzes Wort mit Großbuchstaben. 88 00:06:39,015 --> 00:06:42,215 Also, was auch immer der Dishname würde als 89 00:06:42,215 --> 00:06:49,280 vollständig Großbuchstaben gerendert werden, wenn er dort auf die Vorlage gerendert wird. 90 00:06:49,280 --> 00:06:52,800 Also, das ist die Verwendung eines Winkelrohrs hier. 91 00:06:52,800 --> 00:06:56,870 Also, wir werden mehr Winkelrohre verwenden, während wir weitergehen. 92 00:06:56,870 --> 00:07:05,205 Dies ist unsere erste Begegnung mit einem der eingebauten Winkelrohre in diesem Kurs. 93 00:07:05,205 --> 00:07:10,400 Also, damit haben wir jetzt unser Layout geändert, 94 00:07:10,400 --> 00:07:15,670 um dieses div hier und dann diese Rasterliste hier anzuzeigen. 95 00:07:15,670 --> 00:07:17,240 Speichern wir die Änderungen. 96 00:07:17,240 --> 00:07:21,070 Gehen Sie jetzt zu app.module.ts Datei, 97 00:07:21,070 --> 00:07:24,640 müssen wir das MatGridListModule dort importieren. 98 00:07:24,640 --> 00:07:27,660 Also, nach oben gehen, werden wir sagen: 99 00:07:27,660 --> 00:07:36,490 „Importieren Sie MatGridListModule aus Winkel/Material/Grid/Liste.“ 100 00:07:39,260 --> 00:07:42,055 Sobald wir dies hinzugefügt haben, 101 00:07:42,055 --> 00:07:45,925 werden wir zu den Importen im Dekorator gehen 102 00:07:45,925 --> 00:07:53,210 und dann das MatGridListModule in die Eingaben aufnehmen. 103 00:07:53,210 --> 00:07:55,830 Lassen Sie uns die Änderungen nochmals speichern. 104 00:07:55,830 --> 00:08:01,650 Werfen wir einen kurzen Blick auf unsere Webseite und wie es auf dem Bildschirm aussieht. Wenn Sie 105 00:08:01,650 --> 00:08:03,730 auf unsere Webseite gehen, 106 00:08:03,730 --> 00:08:09,125 können Sie jetzt sehen, dass Ihre Speisekarte auf eine andere Weise ausgelegt ist. 107 00:08:09,125 --> 00:08:13,590 Obwohl, es ist nicht wirklich so toll Blick auf den Moment. 108 00:08:13,590 --> 00:08:15,230 Ich bin kein Designer, 109 00:08:15,230 --> 00:08:18,880 also das ist das Beste, was ich daraus bekommen konnte. 110 00:08:18,880 --> 00:08:22,330 Nun, wenn ich 20 Elemente in meinem Menü hätte, 111 00:08:22,330 --> 00:08:27,110 könnte ich mehrere Elemente in jeder Zeile und mehrere Spalten auslegen, 112 00:08:27,110 --> 00:08:31,860 und dann könnte ich den Platz komprimieren, den jedes Element belegt, 113 00:08:31,860 --> 00:08:35,660 oder ich kann die Größe des Bildes vergrößern, so dass es 114 00:08:35,660 --> 00:08:40,245 das ganze Ding einnimmt, bis es auf der -Bildschirm. 115 00:08:40,245 --> 00:08:49,185 Sehen wir uns das Gleiche an, wenn es in einem kleineren Bildschirm angezeigt wird. 116 00:08:49,185 --> 00:08:52,400 Also, hier werde ich die Hilfe der 117 00:08:52,400 --> 00:08:57,990 Entwickleroptionen in meinem Chrome-Browser nehmen. 118 00:08:57,990 --> 00:09:01,175 Also werde ich hier mit den Entwicklungstools beginnen. 119 00:09:01,175 --> 00:09:04,330 Wenn ich die Entwicklungstools hier habe, 120 00:09:04,330 --> 00:09:08,340 können Sie diese Schaltfläche hier sehen, die besagt, „Geräte-Symbolleiste einschalten“. 121 00:09:08,340 --> 00:09:10,070 Also, lassen Sie mich zurückschalten. 122 00:09:10,070 --> 00:09:16,180 Dann können Sie sehen, dass die gleiche Seite auf verschiedenen Bildschirmgrößen gerendert wird. 123 00:09:16,180 --> 00:09:23,210 Hier sehen Sie die Seite, die in einem Galaxy S5 gerendert wird, 124 00:09:23,210 --> 00:09:27,030 und dann das gleiche, was 125 00:09:28,090 --> 00:09:34,435 Sie sehen können, dass es im Querformat gerendert wird. 126 00:09:34,435 --> 00:09:39,110 Sie können also sehen, dass es mir ermöglicht, dieselbe Seite 127 00:09:39,110 --> 00:09:44,490 auf verschiedenen Bildschirmgrößen mit den integrierten Entwicklertools in Android anzuzeigen. 128 00:09:44,490 --> 00:09:48,755 Werfen wir einen Blick darauf, wie es auf einem iPhone aussieht. 129 00:09:48,755 --> 00:09:51,815 Die Speisekarte sieht hier viel attraktiver aus. 130 00:09:51,815 --> 00:09:55,220 Das möchte ich auf dem Bildschirm erreichen. 131 00:09:55,220 --> 00:10:02,155 Wenn meine Bilder sogar auf den Bildschirmen mit höherer Auflösung viel größer wären, 132 00:10:02,155 --> 00:10:06,045 würde das Menü so aussehen. 133 00:10:06,045 --> 00:10:11,205 Im Landschaftsmodus wird es so aussehen. 134 00:10:11,205 --> 00:10:15,045 Notieren Sie sich nun diese Entwicklertools in Chrome. 135 00:10:15,045 --> 00:10:21,790 Wir werden die Entwickler-Tools später verwenden, wenn wir Angular 136 00:10:21,790 --> 00:10:25,340 genauer verwenden, weil wir Dinge wie das untersuchen können, was Angular 137 00:10:25,340 --> 00:10:30,180 für uns auf der Konsole drucken kann. 138 00:10:30,180 --> 00:10:36,650 Dann können wir sogar untersuchen, wie die verschiedenen Teile unserer Anwendung abgerufen werden. 139 00:10:36,650 --> 00:10:40,440 Wir können uns die Netzwerkleistung unserer Anwendung ansehen und so weiter. 140 00:10:40,440 --> 00:10:45,110 Also, das ist, wo diese Entwickler-Tools Addition ist sehr, 141 00:10:45,110 --> 00:10:47,270 sehr nützlich für uns. 142 00:10:47,270 --> 00:10:51,100 Wenn wir auf den normalen Weg zurückkehren, 143 00:10:51,100 --> 00:10:56,790 sieht unsere Webseite in einem Standard-Desktop-Browser aus. 144 00:10:56,790 --> 00:10:58,545 Wir sind noch nicht fertig. 145 00:10:58,545 --> 00:11:02,955 Gehen wir zurück zu den Menükomponenten. 146 00:11:02,955 --> 00:11:07,200 Typoskriptdatei und dann dieses Geschirr, das ich 147 00:11:07,200 --> 00:11:11,765 hier definiert habe, anstatt dies in meiner Klasse 148 00:11:11,765 --> 00:11:18,060 zu halten, werde ich dieses Geschirr in eine Konstante verschieben, die ich 149 00:11:18,060 --> 00:11:25,670 dort oben definieren werde und wir werden es als const Gerichte nennen, 150 00:11:25,860 --> 00:11:31,370 und dies wäre von der Art Gericht ein Array sein, 151 00:11:31,370 --> 00:11:38,825 und dann werde ich schneiden diese ganze Reihe von Gerichten von hier und dann bewegen Sie es dort oben. 152 00:11:38,825 --> 00:11:43,450 Dies ist in Vorbereitung auf eine zukünftige Übung, bei der wir 153 00:11:43,450 --> 00:11:50,050 diese Art von Daten nicht in unsere Anwendung aufnehmen werden, 154 00:11:50,050 --> 00:11:59,950 sondern wir werden diese in einen Dienst verschieben. 155 00:11:59,950 --> 00:12:05,260 Also, was ich getan habe, ist, dass Geschirr Informationen geschnitten und 156 00:12:05,260 --> 00:12:11,405 dann in eine Konstante hier mit dem Namen Gerichte in allen Hauptstädten hier, 157 00:12:11,405 --> 00:12:16,100 und dann ist mein Geschirr jetzt als Waise hier gelassen. 158 00:12:16,100 --> 00:12:26,275 Also, das werde ich es gleich Geschirr hier machen. 159 00:12:26,275 --> 00:12:31,165 Nun, Sie müssen sich fragen, wie kommt es, dass ich den Typ für das Geschirr entfernt habe. 160 00:12:31,165 --> 00:12:35,125 TypeScript ist intelligent genug, um zu erkennen, dass, wenn Sie dies tun, 161 00:12:35,125 --> 00:12:40,360 wird es automatisch den Typ auf Gerichte zuweisen, was Sie in Geschirr haben. 162 00:12:40,360 --> 00:12:44,195 Also, selbst wenn Sie es nicht in TypeScript eingeben, wird das tun, 163 00:12:44,195 --> 00:12:47,350 aber wenn Sie völlig klar sein möchten, 164 00:12:47,350 --> 00:12:50,925 können Sie dies auch tun und das wird genauso gut funktionieren. 165 00:12:50,925 --> 00:12:53,920 Okay, wenn du es vorziehst, wird es als solches verlassen. 166 00:12:53,920 --> 00:13:01,795 Nun, zusätzlich werde ich hier eine weitere Variable namens SelectedDish vorstellen. 167 00:13:01,795 --> 00:13:08,665 Diese Variable werde ich in dieser Übung und einer der späteren Übungen auch verwenden. 168 00:13:08,665 --> 00:13:17,875 Also werde ich das gleich dem ersten Gericht in meinem Array machen. 169 00:13:17,875 --> 00:13:24,730 Nun wird dieses SelectedDish für den nächsten Teil dieser Übung nützlich sein. 170 00:13:24,730 --> 00:13:29,265 Lassen Sie uns also die Änderungen speichern und dann zu unserer Vorlage zurückkehren. 171 00:13:29,265 --> 00:13:33,460 In der Vorlage, was ich tun werde, ist direkt unter dem Menü, 172 00:13:33,460 --> 00:13:39,825 ich werde ein Kartenelement aus eckigem Material verwenden, um 173 00:13:39,825 --> 00:13:46,555 dieses selectedDish direkt unter dem Menü dort anzuzeigen. 174 00:13:46,555 --> 00:13:50,700 Nun, obwohl dies nicht der beste Weg ist, 175 00:13:50,700 --> 00:13:57,720 dies zu tun, aber das mache ich in Vorbereitung auf die nächste Übung, nur um 176 00:13:57,720 --> 00:14:04,920 Ihnen zu zeigen, wie ein Material Kartenelement für unsere Anwendung verwendet werden kann. 177 00:14:04,920 --> 00:14:09,330 Also, ich werde hier ein div mit einem fx flex verwenden, 178 00:14:09,330 --> 00:14:12,710 und dann werde ich zu diesem div 179 00:14:12,710 --> 00:14:22,565 ein nGIF mit dem SelectedDish hinzufügen. 180 00:14:22,565 --> 00:14:28,045 Beachten Sie also, dass ich hier ein nGIF auf dieses div anwende, um 181 00:14:28,045 --> 00:14:33,330 anzugeben, dass, wenn das selectedDish derzeit null ist, 182 00:14:33,330 --> 00:14:37,535 ich dieses div nicht zum dom hinzufügen werde. 183 00:14:37,535 --> 00:14:38,920 Wenn dies nicht der Fall ist, 184 00:14:38,920 --> 00:14:42,050 wird dieses div dem dom hinzugefügt 185 00:14:42,050 --> 00:14:48,485 und zeigt das Kartenelement mit dem Inhalt im If an. 186 00:14:48,485 --> 00:14:55,760 Also werde ich ein Kartenelement verwenden, um die Details des SelectedDish anzuzeigen. Um 187 00:14:55,760 --> 00:14:57,290 das zu tun, 188 00:14:57,290 --> 00:15:02,870 benutze ich hier eine Mattenkarte von der Materialdesigns Karte hier. 189 00:15:02,870 --> 00:15:05,090 Die Mat-Karte selbst hat 190 00:15:05,090 --> 00:15:10,375 einen Mat-Card-Header Teil 191 00:15:10,375 --> 00:15:15,640 und auch zusammen mit dem Mat-Card-Header 192 00:15:15,640 --> 00:15:21,010 wird es einen Mat-Card-Inhalt haben. 193 00:15:21,010 --> 00:15:25,055 Lassen Sie mich diesen Mat-Card-Inhalt abschließen. 194 00:15:25,055 --> 00:15:27,785 Also, in der Kopfzeile, was möchte ich in der Kopfzeile anzeigen? 195 00:15:27,785 --> 00:15:31,725 In der Kopfzeile möchte ich 196 00:15:31,725 --> 00:15:37,600 einen Mat-Card-Titel verwenden, um 197 00:15:37,600 --> 00:15:44,490 hier die Details des Namens des SelectedDish anzuzeigen. 198 00:15:44,490 --> 00:15:53,755 Also, ich würde hineingehen und h3 sagen und das h3 schließen und innen hier werde ich 199 00:15:53,755 --> 00:15:59,870 die Interpolation verwenden und dann 200 00:16:00,240 --> 00:16:09,035 SelectedDish Name und Pipe Großbuchstaben sagen. 201 00:16:09,035 --> 00:16:17,375 Beachten Sie also, wie ich den Namen des SelectedDish mit dem Mat-Card-Titel eingefügt habe. 202 00:16:17,375 --> 00:16:22,750 Nun, zusätzlich werde ich eine Methode verwenden, ein 203 00:16:23,720 --> 00:16:33,930 genanntes Bild, das ein Attribut namens mat-card-image nimmt und 204 00:16:33,930 --> 00:16:43,630 die Quelle wäre, wie Sie erwartet haben, 205 00:16:43,630 --> 00:16:49,270 sollte dies selectedDish.Image und 206 00:16:49,270 --> 00:16:54,310 dann die Alternative, die ich 207 00:16:54,310 --> 00:17:01,640 als selectedDish.Name geben werde. 208 00:17:03,450 --> 00:17:11,790 Also, das wäre das Bild, das in meiner Karte hier enthalten sein wird. 209 00:17:11,790 --> 00:17:13,905 Also, im Inhalt, 210 00:17:13,905 --> 00:17:27,640 werde ich SelectedDish Beschreibung einschließen, 211 00:17:31,680 --> 00:17:36,105 und dann zusammen mit dem Inhalt hier, 212 00:17:36,105 --> 00:17:41,860 kann ich auch einige Schaltflächen an der Unterseite der Karte hinzufügen. 213 00:17:41,860 --> 00:17:54,445 Also, ich werde mat-card-Aktionen hier und 214 00:17:54,445 --> 00:17:58,585 innen verwenden, kann ich einen Knopf einschließen. 215 00:17:58,585 --> 00:18:06,550 Sie sehen also, dass dies die Verwendung einer Schaltfläche 216 00:18:06,550 --> 00:18:14,210 in meiner Anwendung ist, zwei Schaltflächen. 217 00:18:16,130 --> 00:18:20,040 Beachten Sie die Verwendung dieser Mat-Button hier. 218 00:18:20,040 --> 00:18:26,360 Also, dies wird diese Schaltfläche in ein materielles Design wie Schaltfläche hier verwandeln 219 00:18:26,360 --> 00:18:30,725 , und so werden diese beiden Tasten unten auf meiner Karte erscheinen hier. 220 00:18:30,725 --> 00:18:35,065 Also, damit habe ich in den Details des SelectedDish hinzugefügt. 221 00:18:35,065 --> 00:18:36,980 Es gibt Grund für mich, das zu tun. 222 00:18:36,980 --> 00:18:40,910 Ich zeige Ihnen, wie Sie die Details in einer Karte anzeigen können, 223 00:18:40,910 --> 00:18:45,435 nun, das ist in Vorbereitung auf Ihre erste Aufgabe. 224 00:18:45,435 --> 00:18:52,700 So können Sie hier sehen, wie wir eine Materialdesign-Karte in unserer Vorlage verwenden können. 225 00:18:52,700 --> 00:18:59,565 Gehen Sie zu @module .ts, müssen wir die Karte und das Schaltflächenmodul importieren. 226 00:18:59,565 --> 00:19:07,390 Also, nach oben gehen wir sagen, importieren MatCardModule von 227 00:19:07,390 --> 00:19:13,555 eckigen Materialkarte und 228 00:19:13,555 --> 00:19:23,150 importieren MatButtonModule aus eckigem Materialknopf. 229 00:19:23,700 --> 00:19:27,280 Nun, da wir diese beiden oben hinzugefügt haben, 230 00:19:27,280 --> 00:19:31,389 gehen wir zum Dekorator, 231 00:19:31,389 --> 00:19:40,580 und in den Importen fügen wir das MatCardModule und das MatPatternModule hinzu. 232 00:19:41,430 --> 00:19:46,945 Also, lassen Sie uns die Änderungen speichern und dann einen kurzen Blick auf unsere Webseite werfen. 233 00:19:46,945 --> 00:19:50,535 Wenn Sie sich unsere eckige Anwendung im Browser ansehen, 234 00:19:50,535 --> 00:19:54,690 sehen Sie jetzt, dass wir das Menü 235 00:19:54,690 --> 00:20:00,255 hier angezeigt haben und dann unten haben wir jetzt ein Kartenelement. 236 00:20:00,255 --> 00:20:06,090 So können Sie hier das Kartenelement mit dem Titel dort und dem Bild sehen. 237 00:20:06,090 --> 00:20:09,770 Natürlich sieht das Bild schrecklich aus, weil es 238 00:20:09,770 --> 00:20:12,990 die tatsächliche Bildgröße ist, die ich Ihnen gegeben habe, ist so 239 00:20:12,990 --> 00:20:17,130 klein und es wurde erweitert, um den gesamten Bildschirm zu füllen. 240 00:20:17,130 --> 00:20:20,075 Sehen Sie sich hier unten an. Dies 241 00:20:20,075 --> 00:20:24,625 enthält also die Beschreibung des Bildes und dann zwei Schaltflächen 242 00:20:24,625 --> 00:20:26,020 hier, unten unten hier. 243 00:20:26,020 --> 00:20:35,990 So, das ist, wie die Mat-Button die Schaltflächen in einer eckigen Vorlage formatiert, 244 00:20:35,990 --> 00:20:37,395 so dass Sie mögen und die Freigabe-Schaltfläche haben. 245 00:20:37,395 --> 00:20:39,070 Natürlich tun sie nichts, 246 00:20:39,070 --> 00:20:43,695 aber beachten Sie, dass das Materialdesign wie Verhalten da ist. 247 00:20:43,695 --> 00:20:45,070 Wenn Sie also auf die Schaltfläche klicken, 248 00:20:45,070 --> 00:20:48,100 können Sie sehen, wie die Wellen durchlaufen. 249 00:20:48,100 --> 00:20:52,440 Deshalb habe ich mich entschieden, das 250 00:20:52,440 --> 00:21:04,260 Winkelmaterialmodul für die Gestaltung der Vorlagen in diesem Kurs zu verwenden. 251 00:21:04,260 --> 00:21:07,700 Wenn man es auf einem kleineren Gerät betrachtet, 252 00:21:07,700 --> 00:21:11,960 sieht es auf einem kleineren Gerät viel attraktiver aus. 253 00:21:11,960 --> 00:21:16,000 So können Sie sehen, dass das Rendering auf einem kleineren Gerät viel besser ist, 254 00:21:16,000 --> 00:21:19,715 Sie können sehen, dass Sie auf dem Bildschirm 255 00:21:19,715 --> 00:21:27,245 die Karte dort sehen können, die die Details und die beiden Tasten dort zeigt, 256 00:21:27,245 --> 00:21:29,750 wie und die Freigabe-Taste 257 00:21:29,750 --> 00:21:34,190 und die Details des Gerichts. 258 00:21:37,080 --> 00:21:40,650 Also, das schließt diese Übung ab. 259 00:21:40,650 --> 00:21:42,170 In dieser Übung 260 00:21:42,170 --> 00:21:49,800 haben wir also die Verwendung der Rasterliste und der 261 00:21:49,800 --> 00:22:00,030 Kartenmaterial-Designkomponenten untersucht, um die Vorlage für unsere Menükomponente zu entwerfen. 262 00:22:00,030 --> 00:22:05,720 Dies kann ein guter Zeitpunkt für Sie sein, einen guten Kommentar mit der Nachricht zu machen, 263 00:22:05,720 --> 00:22:09,620 Winkelkomponenten Teil zwei.