Bevor wir mit Angular Template-gesteuerten Formularen beginnen,
müssen wir eine Möglichkeit finden, Inhalt oben auf der aktuellen Webansicht zu überlagern.
Die Bootstrap, wir haben Modelle, die es uns ermöglichen, Inhalte oben auf der Webseite zu überlagern.
Mit der Verwendung von Winkelmaterial in unserer Angular-Anwendung
stellt das Angular Material eine Komponente bereit,
die als Winkeldialogkomponente bezeichnet wird, mit der Sie
Inhalte über der aktuellen Ansicht überlagern können.
Sehen wir uns an, wie wir die Dialogkomponente in dieser Übung nutzen.
Um mit dieser Übung zu beginnen,
gehen wir zu unserem Code und wir müssen
eine Möglichkeit finden, die Anwendung auszulösen, um den Dialog zu zeigen.
Um dies zu tun, lassen Sie uns eine Schaltfläche in unsere Symbolleiste hier hinzufügen.
Also, gehen
Sie in die Symbolleiste oben hier, lassen Sie mich eine Spanne mit dem Klasse Flex-Abstandhalter hinzufügen, den wir
in unsere
SCSS-Datei für unsere Anwendung eingeführt haben.
Also hatten wir den Flexor-Abstandhalter in der Datei styles.scss
hier unten eingeführt.
Also, das ist die Klasse, die wir hier mit einer Spanne verwenden werden.
Wenn Sie also den Flexor-Abstandshalter auf die Spanne anwenden,
bietet er genügend Platz zwischen
dem vorherigen Element und dem Element, das hier folgt.
Es wird also das Element, das der Spanne folgt, so
weit wie möglich an den äußersten rechten Rand des Bildschirms schieben.
Also, hier, nach diesem,
lassen Sie mich hier einen Knopf hinzufügen.
Also, diese Schaltfläche, die, wenn sie angeklickt wird,
ruft eine Funktion namens OpenLogInforms auf.
So, wie Sie
sich bewusst sind, werden wir hier ein Formular für unsere Bewerbung unterstützen.
Wir werden uns ansehen, wie das Formular in der nächsten Übung entwickelt wird.
Nun, dazu, lassen Sie mich in
die entsprechenden Schriftart awesome Icons hinzufügen.
Also, Ich werde fa fa-Anmeldung sagen,
und auch in fa-lg hinzufügen, dass.
Also, das wird in ein Symbol,
das Anmelden-Symbol hier hinzufügen
, und dann
werden wir das Wort login dort einfügen.
So wird eine Schaltfläche namens Login in der Symbolleiste
am rechten Rand des Bildschirms zusammen mit dem Anmeldesymbol dort erstellt,
das, wenn darauf geklickt wird, ein Anmeldeformular öffnet.
Dieses Anmeldeformular selbst wird in einer Materialdialogkomponente gehostet.
Nun, um eine Dialogkomponente zu erstellen,
erkennen wir natürlich, dass dies eine Komponente sein wird, die
oben auf der aktuellen Ansicht dort überlagert werden muss.
Daher benötigen wir eine weitere Komponente, die zu unserer Anwendung hinzugefügt wird.
Also, gehen wir zum Terminal und fügen Sie dann eine weitere Komponente in unserer Anwendung hinzu.
Gehen Sie zum Terminal, lassen Sie mich ng g Komponente Login eingeben.
Also haben wir eine neue Komponente namens Login-Komponente zu unserer Anwendung hinzugefügt.
Sobald die Login-Komponente hinzugefügt wurde,
lassen Sie uns gehen und konfigurieren Sie die Login-Komponente als Dialogkomponente in unserer Anwendung.
Also, um das zu tun, gehen wir zurück zu unserem Code.
Wenn wir zu unserem Code zurückkehren,
sehen wir jetzt, dass die Login-Komponente jetzt geöffnet ist.
Lassen Sie mich die Login-Komponente.ts-Datei öffnen.
Konfigurieren Sie dies also
als Dialogkomponente in Angular Anwendung mit der Materialdialogkomponente.
Lassen Sie mich MatDialog importieren.
Dies ist also die Komponente, die
die Dialogkomponente im Angular Material unterstützt und dann auch
MatDialogGref importiert und diese werden
hier aus Winkelmaterial importiert.
Dies ermöglicht es uns, unsere Komponente zu erstellen und diese in eine Dialogkomponente zu verwandeln.
Nun, danach, lassen Sie uns fortfahren und dann unsere Vorlagendatei hier konfigurieren.
Also, wenn ich hier zur Vorlagendatei gehe,
werde ich dies als Mat-Symbolleiste erstellen.
Also, innerhalb dieses Dialogs werde auch eine Symbolleiste anzeigen.
Für diese Symbolleiste werde ich sagen, loggen Sie sich rechts oben, danach
werden wir die Flex-Spacer-Klasse
hier einführen und dann nach der Flex-Spacer-Klasse,
werden wir in einer Schaltfläche
mit den Attributen mat-button mat-dialog-close hinzufügen.
Also, dieses mat-dialog-close ist etwas, das die Dialogkomponenten für uns unterstützen,
dieses Attribut, das diese Schaltfläche in
eine Schaltfläche verwandelt, die, wenn sie angeklickt wird, diesen Dialog dort schließt.
In diesem Knopf werde ich mal da drin benutzen.
Also, das wird es als Kreuz auf dem Bildschirm dort angezeigt.
Also, das ist der Button, den wir in den Dialog einfügen werden.
Gerade jetzt enthält unser Dialog nur das aus seiner Sicht.
Damit wir nun die Dialogkomponente einbeziehen und sie nutzen können,
müssen wir natürlich zum App-Modul gehen.
Im App-Modul
müssen wir das entsprechende Modul importieren, das Dialogkomponente unterstützt.
Daher importieren wir das MatDialogemodule
aus Angular Materialdialogfeld.
Dies wird also im Dialogmodul in unsere Anwendung aufgenommen und dann, wie Sie erwarten,
müssen sie hier in die Importe gehen und dann
dieses Dialogmodul in unsere Anwendung importieren.
Nicht nur das, jetzt,
um eine Angular-Komponente in eine Dialogkomponente
zu verwandeln, müssen wir diese Komponente auch als Eintragskomponente deklarieren.
Nun, erinnern Sie sich, dass wir in der Login-Komponente zu unserer Anwendung hinzugefügt haben und so
diese Login-Komponente bereits dort hinzugefügt und
dann auch in den Deklarationen enthalten ist.
Nun, wenn Sie das als Overlay mit der Materialdialogkomponente verwenden möchten,
müssen wir diese auch in eine andere Eigenschaft aufnehmen, die als
Eintragskomponenten in unserem ng Modul Dekorator genannt wird.
Also, in diesen Eintragskomponenten
muss ich auch die Login-Komponente hier einbinden.
Dies ermöglicht es uns,
die Login-Komponente als Overlay oben auf dem aktuellen Bildschirm zu verwenden.
Sobald wir also die Angular Materialkomponente aktualisiert haben,
müssen wir nun in der Lage sein, diese Login-Komponente auszulösen.
Nun haben wir in der Schaltfläche in
die Header-Komponente hinzugefügt und dann haben wir hier diese Funktion genannt open login form.
Das muss also die Darbietung des Dialogs auslösen.
Also, wenn ich in die Header-Komponente.ts-Datei gehe,
um die Mat-Dialogkomponente in der Header-Komponente zu verwenden,
lassen Sie mich MatDialog und dann
MatDialogGref aus Winkelmaterial importieren.
Lassen Sie mich innerhalb dieser Funktion im Konstruktor
den Dialog als MatDialog injizieren.
Dies ist also ein Dienst, der es uns ermöglicht, die Komponente als Dialogkomponente zu öffnen.
Nun, wie funktioniert das?
Also, hier müssen wir in dieser Funktion namens OpenLogInform hinzufügen,
die beim Aufruf die Anzeige der Dialogkomponente auslösen soll.
Also, dafür werden wir sagen, dieser Dialog,
und dieser Dialog unterstützt eine Funktion namens
open, auf die wir die Komponente liefern, die
als Ansicht für den Dialog fungieren wird, der oben auf der aktuellen Webansicht überlagert wird.
Also, hier, wie wir erkennen,
haben wir die Login-Komponente als Dialogkomponente deklariert.
Also, wir werden die Login-Komponente aufrufen
und dann auch wir werden eine Größe für den Dialog angeben.
Wenn Sie möchten,
können Sie zulassen, dass die Standardgröße angezeigt wird,
aber Sie können die Größe auch explizit konfigurieren, wenn Sie möchten.
Lassen Sie mich in diesem Fall also die Breite und die Höhe dieses Dialogs konfigurieren.
Sie müssen dies nicht unbedingt tun, wenn Sie dies nicht tun,
dann wird hier der Dialog in der Standardgröße angezeigt.
Damit
ist meine Header-Komponente jetzt so konfiguriert, dass
wir beim Aufruf des offenen Login-Formulars
die Login-Komponente als Dialog öffnen und sie dann oben auf der aktuellen Zeichenfolge anzeigen können.
Also, lassen Sie uns alle Änderungen speichern und dann gehen und werfen Sie
einen Blick auf unsere Anwendung im Browser.
Gehen Sie zum Browser, Sie werden jetzt sehen, dass am rechten Rand des Bildschirms,
wir haben eine weitere neue Schaltfläche hier genannt die Login-Schaltfläche,
und sehen, dass Anmelden in Schriftart awesome Symbol hinzugefügt, dass.
Wenn Sie nun auf den Login-Button klicken,
sehen Sie sofort ein Dialog-Pop-up auf dem Bildschirm.
Auch hier können Sie das schließen, indem
Sie auf eine beliebige Stelle auf dem Bildschirm außerhalb des Dialogs klicken oder darauf klicken und dann erscheint der Dialog auf dem Bildschirm.
Also, von Bootstrap haben Sie das Modal in Bootstrap gesehen.
Also, das ist genau wie das Modal von Bootstrap.
Also, hier haben wir den Dialog, der auf dem Bildschirm erscheint.
Jetzt haben wir Platz auf dem Dialog, wo wir jetzt
in Inhalte einfügen können, die wir angezeigt werden müssen, wenn dieser Dialog aufgerufen wird.
Beachten Sie auch diese Schaltfläche zum Verwerfen hier.
Wenn Sie also darauf klicken,
wird der Dialog ebenfalls abgewiesen.
Wenn Sie nun irgendwo auf den Dialog klicken,
passiert nichts, aber wenn Sie auf diese Schaltfläche klicken, wird der Dialog geschlossen.
So funktioniert also die Dialogkomponente aus Angular Material in unserer Anwendung.
Der nächste Schritt besteht darin, in das Anmeldeformular zu diesem Dialog hinzuzufügen.
Damit schließen wir diese Übung ab.
In dieser Übung haben Sie gesehen, wie wir den Dialog Angular Material verwenden können,
um unserer Anwendung ein Overlay hinzuzufügen und es dann über der aktuellen Ansicht anzuzeigen.
Wir werden das Formular dazu hinzufügen.
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit den Nachrichtendialogen zu machen.