1 00:00:04,010 --> 00:00:09,440 Bevor wir mit Angular Template-gesteuerten Formularen beginnen, 2 00:00:09,440 --> 00:00:15,165 müssen wir eine Möglichkeit finden, Inhalt oben auf der aktuellen Webansicht zu überlagern. 3 00:00:15,165 --> 00:00:21,935 Die Bootstrap, wir haben Modelle, die es uns ermöglichen, Inhalte oben auf der Webseite zu überlagern. 4 00:00:21,935 --> 00:00:26,700 Mit der Verwendung von Winkelmaterial in unserer Angular-Anwendung 5 00:00:26,700 --> 00:00:29,970 stellt das Angular Material eine Komponente bereit, 6 00:00:29,970 --> 00:00:32,820 die als Winkeldialogkomponente bezeichnet wird, mit der Sie 7 00:00:32,820 --> 00:00:35,865 Inhalte über der aktuellen Ansicht überlagern können. 8 00:00:35,865 --> 00:00:42,010 Sehen wir uns an, wie wir die Dialogkomponente in dieser Übung nutzen. 9 00:00:42,080 --> 00:00:45,470 Um mit dieser Übung zu beginnen, 10 00:00:45,470 --> 00:00:49,580 gehen wir zu unserem Code und wir müssen 11 00:00:49,580 --> 00:00:54,230 eine Möglichkeit finden, die Anwendung auszulösen, um den Dialog zu zeigen. 12 00:00:54,230 --> 00:00:58,620 Um dies zu tun, lassen Sie uns eine Schaltfläche in unsere Symbolleiste hier hinzufügen. 13 00:00:58,620 --> 00:01:01,475 Also, gehen 14 00:01:01,475 --> 00:01:10,790 Sie in die Symbolleiste oben hier, lassen Sie mich eine Spanne mit dem Klasse Flex-Abstandhalter hinzufügen, den wir 15 00:01:10,790 --> 00:01:18,340 in unsere 16 00:01:18,340 --> 00:01:21,650 SCSS-Datei für unsere Anwendung eingeführt haben. 17 00:01:21,650 --> 00:01:29,170 Also hatten wir den Flexor-Abstandhalter in der Datei styles.scss 18 00:01:29,170 --> 00:01:30,840 hier unten eingeführt. 19 00:01:30,840 --> 00:01:34,240 Also, das ist die Klasse, die wir hier mit einer Spanne verwenden werden. 20 00:01:34,240 --> 00:01:37,035 Wenn Sie also den Flexor-Abstandshalter auf die Spanne anwenden, 21 00:01:37,035 --> 00:01:40,670 bietet er genügend Platz zwischen 22 00:01:40,670 --> 00:01:45,670 dem vorherigen Element und dem Element, das hier folgt. 23 00:01:45,670 --> 00:01:49,280 Es wird also das Element, das der Spanne folgt, so 24 00:01:49,280 --> 00:01:53,030 weit wie möglich an den äußersten rechten Rand des Bildschirms schieben. 25 00:01:53,030 --> 00:01:54,985 Also, hier, nach diesem, 26 00:01:54,985 --> 00:01:57,500 lassen Sie mich hier einen Knopf hinzufügen. 27 00:01:57,500 --> 00:02:02,755 Also, diese Schaltfläche, die, wenn sie angeklickt wird, 28 00:02:02,755 --> 00:02:09,635 ruft eine Funktion namens OpenLogInforms auf. 29 00:02:09,635 --> 00:02:11,660 So, wie Sie 30 00:02:11,660 --> 00:02:17,865 sich bewusst sind, werden wir hier ein Formular für unsere Bewerbung unterstützen. 31 00:02:17,865 --> 00:02:22,475 Wir werden uns ansehen, wie das Formular in der nächsten Übung entwickelt wird. 32 00:02:22,475 --> 00:02:25,330 Nun, dazu, lassen Sie mich in 33 00:02:25,330 --> 00:02:33,120 die entsprechenden Schriftart awesome Icons hinzufügen. 34 00:02:33,120 --> 00:02:38,950 Also, Ich werde fa fa-Anmeldung sagen, 35 00:02:42,290 --> 00:02:50,010 und auch in fa-lg hinzufügen, dass. 36 00:02:50,010 --> 00:02:52,875 Also, das wird in ein Symbol, 37 00:02:52,875 --> 00:02:54,645 das Anmelden-Symbol hier hinzufügen 38 00:02:54,645 --> 00:02:55,880 , und dann 39 00:02:55,880 --> 00:02:58,690 werden wir das Wort login dort einfügen. 40 00:02:58,690 --> 00:03:05,980 So wird eine Schaltfläche namens Login in der Symbolleiste 41 00:03:05,980 --> 00:03:14,070 am rechten Rand des Bildschirms zusammen mit dem Anmeldesymbol dort erstellt, 42 00:03:14,070 --> 00:03:16,960 das, wenn darauf geklickt wird, ein Anmeldeformular öffnet. 43 00:03:16,960 --> 00:03:22,670 Dieses Anmeldeformular selbst wird in einer Materialdialogkomponente gehostet. 44 00:03:22,670 --> 00:03:26,204 Nun, um eine Dialogkomponente zu erstellen, 45 00:03:26,204 --> 00:03:29,330 erkennen wir natürlich, dass dies eine Komponente sein wird, die 46 00:03:29,330 --> 00:03:32,270 oben auf der aktuellen Ansicht dort überlagert werden muss. 47 00:03:32,270 --> 00:03:36,770 Daher benötigen wir eine weitere Komponente, die zu unserer Anwendung hinzugefügt wird. 48 00:03:36,770 --> 00:03:44,095 Also, gehen wir zum Terminal und fügen Sie dann eine weitere Komponente in unserer Anwendung hinzu. 49 00:03:44,095 --> 00:03:50,735 Gehen Sie zum Terminal, lassen Sie mich ng g Komponente Login eingeben. 50 00:03:50,735 --> 00:03:55,725 Also haben wir eine neue Komponente namens Login-Komponente zu unserer Anwendung hinzugefügt. 51 00:03:55,725 --> 00:03:57,725 Sobald die Login-Komponente hinzugefügt wurde, 52 00:03:57,725 --> 00:04:04,490 lassen Sie uns gehen und konfigurieren Sie die Login-Komponente als Dialogkomponente in unserer Anwendung. 53 00:04:04,490 --> 00:04:08,305 Also, um das zu tun, gehen wir zurück zu unserem Code. 54 00:04:08,305 --> 00:04:10,215 Wenn wir zu unserem Code zurückkehren, 55 00:04:10,215 --> 00:04:13,715 sehen wir jetzt, dass die Login-Komponente jetzt geöffnet ist. 56 00:04:13,715 --> 00:04:16,445 Lassen Sie mich die Login-Komponente.ts-Datei öffnen. 57 00:04:16,445 --> 00:04:18,935 Konfigurieren Sie dies also 58 00:04:18,935 --> 00:04:24,485 als Dialogkomponente in Angular Anwendung mit der Materialdialogkomponente. 59 00:04:24,485 --> 00:04:30,385 Lassen Sie mich MatDialog importieren. 60 00:04:30,385 --> 00:04:32,540 Dies ist also die Komponente, die 61 00:04:32,540 --> 00:04:39,480 die Dialogkomponente im Angular Material unterstützt und dann auch 62 00:04:39,600 --> 00:04:45,545 MatDialogGref importiert und diese werden 63 00:04:45,545 --> 00:04:52,420 hier aus Winkelmaterial importiert. 64 00:04:53,140 --> 00:05:03,750 Dies ermöglicht es uns, unsere Komponente zu erstellen und diese in eine Dialogkomponente zu verwandeln. 65 00:05:03,750 --> 00:05:10,030 Nun, danach, lassen Sie uns fortfahren und dann unsere Vorlagendatei hier konfigurieren. 66 00:05:10,030 --> 00:05:11,940 Also, wenn ich hier zur Vorlagendatei gehe, 67 00:05:11,940 --> 00:05:16,300 werde ich dies als Mat-Symbolleiste erstellen. 68 00:05:16,300 --> 00:05:22,330 Also, innerhalb dieses Dialogs werde auch eine Symbolleiste anzeigen. 69 00:05:25,350 --> 00:05:34,065 Für diese Symbolleiste werde ich sagen, loggen Sie sich rechts oben, danach 70 00:05:34,065 --> 00:05:43,920 werden wir die Flex-Spacer-Klasse 71 00:05:43,920 --> 00:05:49,350 hier einführen und dann nach der Flex-Spacer-Klasse, 72 00:05:49,350 --> 00:05:53,169 werden wir in einer Schaltfläche 73 00:05:54,590 --> 00:06:04,385 mit den Attributen mat-button mat-dialog-close hinzufügen. 74 00:06:04,385 --> 00:06:09,850 Also, dieses mat-dialog-close ist etwas, das die Dialogkomponenten für uns unterstützen, 75 00:06:09,850 --> 00:06:13,490 dieses Attribut, das diese Schaltfläche in 76 00:06:13,490 --> 00:06:18,255 eine Schaltfläche verwandelt, die, wenn sie angeklickt wird, diesen Dialog dort schließt. 77 00:06:18,255 --> 00:06:26,740 In diesem Knopf werde ich mal da drin benutzen. 78 00:06:26,740 --> 00:06:30,600 Also, das wird es als Kreuz auf dem Bildschirm dort angezeigt. 79 00:06:30,600 --> 00:06:33,110 Also, das ist der Button, den wir in den Dialog einfügen werden. 80 00:06:33,110 --> 00:06:38,855 Gerade jetzt enthält unser Dialog nur das aus seiner Sicht. 81 00:06:38,855 --> 00:06:44,870 Damit wir nun die Dialogkomponente einbeziehen und sie nutzen können, 82 00:06:44,870 --> 00:06:47,350 müssen wir natürlich zum App-Modul gehen. 83 00:06:47,350 --> 00:06:49,030 Im App-Modul 84 00:06:49,030 --> 00:06:59,190 müssen wir das entsprechende Modul importieren, das Dialogkomponente unterstützt. 85 00:06:59,190 --> 00:07:02,765 Daher importieren wir das MatDialogemodule 86 00:07:02,765 --> 00:07:10,200 aus Angular Materialdialogfeld. 87 00:07:10,200 --> 00:07:20,300 Dies wird also im Dialogmodul in unsere Anwendung aufgenommen und dann, wie Sie erwarten, 88 00:07:20,300 --> 00:07:25,070 müssen sie hier in die Importe gehen und dann 89 00:07:25,070 --> 00:07:30,515 dieses Dialogmodul in unsere Anwendung importieren. 90 00:07:30,515 --> 00:07:32,735 Nicht nur das, jetzt, 91 00:07:32,735 --> 00:07:38,575 um eine Angular-Komponente in eine Dialogkomponente 92 00:07:38,575 --> 00:07:44,330 zu verwandeln, müssen wir diese Komponente auch als Eintragskomponente deklarieren. 93 00:07:44,330 --> 00:07:49,310 Nun, erinnern Sie sich, dass wir in der Login-Komponente zu unserer Anwendung hinzugefügt haben und so 94 00:07:49,310 --> 00:07:51,920 diese Login-Komponente bereits dort hinzugefügt und 95 00:07:51,920 --> 00:07:54,845 dann auch in den Deklarationen enthalten ist. 96 00:07:54,845 --> 00:08:02,255 Nun, wenn Sie das als Overlay mit der Materialdialogkomponente verwenden möchten, 97 00:08:02,255 --> 00:08:08,285 müssen wir diese auch in eine andere Eigenschaft aufnehmen, die als 98 00:08:08,285 --> 00:08:17,460 Eintragskomponenten in unserem ng Modul Dekorator genannt wird. 99 00:08:17,460 --> 00:08:19,715 Also, in diesen Eintragskomponenten 100 00:08:19,715 --> 00:08:23,810 muss ich auch die Login-Komponente hier einbinden. 101 00:08:23,810 --> 00:08:26,000 Dies ermöglicht es uns, 102 00:08:26,000 --> 00:08:30,235 die Login-Komponente als Overlay oben auf dem aktuellen Bildschirm zu verwenden. 103 00:08:30,235 --> 00:08:35,330 Sobald wir also die Angular Materialkomponente aktualisiert haben, 104 00:08:35,330 --> 00:08:39,370 müssen wir nun in der Lage sein, diese Login-Komponente auszulösen. 105 00:08:39,370 --> 00:08:42,530 Nun haben wir in der Schaltfläche in 106 00:08:42,530 --> 00:08:47,240 die Header-Komponente hinzugefügt und dann haben wir hier diese Funktion genannt open login form. 107 00:08:47,240 --> 00:08:51,770 Das muss also die Darbietung des Dialogs auslösen. 108 00:08:51,770 --> 00:08:56,350 Also, wenn ich in die Header-Komponente.ts-Datei gehe, 109 00:08:57,410 --> 00:09:04,350 um die Mat-Dialogkomponente in der Header-Komponente zu verwenden, 110 00:09:04,350 --> 00:09:12,420 lassen Sie mich MatDialog und dann 111 00:09:12,420 --> 00:09:26,745 MatDialogGref aus Winkelmaterial importieren. 112 00:09:26,745 --> 00:09:28,575 Lassen Sie mich innerhalb dieser Funktion im Konstruktor 113 00:09:28,575 --> 00:09:37,365 den Dialog als MatDialog injizieren. 114 00:09:37,365 --> 00:09:43,680 Dies ist also ein Dienst, der es uns ermöglicht, die Komponente als Dialogkomponente zu öffnen. 115 00:09:43,680 --> 00:09:45,615 Nun, wie funktioniert das? 116 00:09:45,615 --> 00:09:50,039 Also, hier müssen wir in dieser Funktion namens OpenLogInform hinzufügen, 117 00:09:52,090 --> 00:09:57,610 die beim Aufruf die Anzeige der Dialogkomponente auslösen soll. 118 00:09:57,610 --> 00:10:00,894 Also, dafür werden wir sagen, dieser Dialog, 119 00:10:00,894 --> 00:10:03,860 und dieser Dialog unterstützt eine Funktion namens 120 00:10:03,860 --> 00:10:09,395 open, auf die wir die Komponente liefern, die 121 00:10:09,395 --> 00:10:18,170 als Ansicht für den Dialog fungieren wird, der oben auf der aktuellen Webansicht überlagert wird. 122 00:10:18,170 --> 00:10:22,415 Also, hier, wie wir erkennen, 123 00:10:22,415 --> 00:10:28,475 haben wir die Login-Komponente als Dialogkomponente deklariert. 124 00:10:28,475 --> 00:10:33,740 Also, wir werden die Login-Komponente aufrufen 125 00:10:33,740 --> 00:10:39,670 und dann auch wir werden eine Größe für den Dialog angeben. 126 00:10:39,670 --> 00:10:40,910 Wenn Sie möchten, 127 00:10:40,910 --> 00:10:44,089 können Sie zulassen, dass die Standardgröße angezeigt wird, 128 00:10:44,089 --> 00:10:48,620 aber Sie können die Größe auch explizit konfigurieren, wenn Sie möchten. 129 00:10:48,620 --> 00:10:57,960 Lassen Sie mich in diesem Fall also die Breite und die Höhe dieses Dialogs konfigurieren. 130 00:11:02,370 --> 00:11:05,960 Sie müssen dies nicht unbedingt tun, wenn Sie dies nicht tun, 131 00:11:05,960 --> 00:11:11,990 dann wird hier der Dialog in der Standardgröße angezeigt. 132 00:11:11,990 --> 00:11:16,550 Damit 133 00:11:16,550 --> 00:11:20,490 ist meine Header-Komponente jetzt so konfiguriert, dass 134 00:11:20,490 --> 00:11:23,765 wir beim Aufruf des offenen Login-Formulars 135 00:11:23,765 --> 00:11:28,835 die Login-Komponente als Dialog öffnen und sie dann oben auf der aktuellen Zeichenfolge anzeigen können. 136 00:11:28,835 --> 00:11:32,090 Also, lassen Sie uns alle Änderungen speichern und dann gehen und werfen Sie 137 00:11:32,090 --> 00:11:35,605 einen Blick auf unsere Anwendung im Browser. 138 00:11:35,605 --> 00:11:40,310 Gehen Sie zum Browser, Sie werden jetzt sehen, dass am rechten Rand des Bildschirms, 139 00:11:40,310 --> 00:11:43,010 wir haben eine weitere neue Schaltfläche hier genannt die Login-Schaltfläche, 140 00:11:43,010 --> 00:11:47,085 und sehen, dass Anmelden in Schriftart awesome Symbol hinzugefügt, dass. 141 00:11:47,085 --> 00:11:49,560 Wenn Sie nun auf den Login-Button klicken, 142 00:11:49,560 --> 00:11:53,995 sehen Sie sofort ein Dialog-Pop-up auf dem Bildschirm. 143 00:11:53,995 --> 00:11:58,610 Auch hier können Sie das schließen, indem 144 00:11:58,610 --> 00:12:03,225 Sie auf eine beliebige Stelle auf dem Bildschirm außerhalb des Dialogs klicken oder darauf klicken und dann erscheint der Dialog auf dem Bildschirm. 145 00:12:03,225 --> 00:12:06,840 Also, von Bootstrap haben Sie das Modal in Bootstrap gesehen. 146 00:12:06,840 --> 00:12:10,485 Also, das ist genau wie das Modal von Bootstrap. 147 00:12:10,485 --> 00:12:13,645 Also, hier haben wir den Dialog, der auf dem Bildschirm erscheint. 148 00:12:13,645 --> 00:12:17,720 Jetzt haben wir Platz auf dem Dialog, wo wir jetzt 149 00:12:17,720 --> 00:12:22,790 in Inhalte einfügen können, die wir angezeigt werden müssen, wenn dieser Dialog aufgerufen wird. 150 00:12:22,790 --> 00:12:26,120 Beachten Sie auch diese Schaltfläche zum Verwerfen hier. 151 00:12:26,120 --> 00:12:27,260 Wenn Sie also darauf klicken, 152 00:12:27,260 --> 00:12:29,030 wird der Dialog ebenfalls abgewiesen. 153 00:12:29,030 --> 00:12:31,535 Wenn Sie nun irgendwo auf den Dialog klicken, 154 00:12:31,535 --> 00:12:36,320 passiert nichts, aber wenn Sie auf diese Schaltfläche klicken, wird der Dialog geschlossen. 155 00:12:36,320 --> 00:12:43,340 So funktioniert also die Dialogkomponente aus Angular Material in unserer Anwendung. 156 00:12:43,340 --> 00:12:50,005 Der nächste Schritt besteht darin, in das Anmeldeformular zu diesem Dialog hinzuzufügen. 157 00:12:50,005 --> 00:12:53,365 Damit schließen wir diese Übung ab. 158 00:12:53,365 --> 00:12:58,250 In dieser Übung haben Sie gesehen, wie wir den Dialog Angular Material verwenden können, 159 00:12:58,250 --> 00:13:04,575 um unserer Anwendung ein Overlay hinzuzufügen und es dann über der aktuellen Ansicht anzuzeigen. 160 00:13:04,575 --> 00:13:07,610 Wir werden das Formular dazu hinzufügen. 161 00:13:07,610 --> 00:13:13,770 Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit den Nachrichtendialogen zu machen.