Prima di iniziare a moduli modello angolare guidato,
abbiamo bisogno di trovare un modo di sovrapporre il contenuto in cima alla vista web corrente.
Il Bootstrap, abbiamo modelli che ci permettono di sovrapporre il contenuto sulla parte superiore della pagina Web.
Con l'uso del materiale Angular nella nostra applicazione Angular,
il materiale Angular fornisce un componente chiamato come
Componente
Angolare Dialogue che consente di sovrapporre il contenuto sulla parte superiore della vista corrente.
Diamo un'occhiata a come utilizziamo la Componente Dialogo in questo esercizio.
Per iniziare a questo esercizio,
andiamo al nostro codice e abbiamo bisogno
di trovare un modo per attivare l'applicazione per mostrare il dialogo.
Quindi, per farlo, aggiungiamo un pulsante nella nostra barra degli strumenti qui.
Quindi, andando alla barra degli strumenti proprio
in alto qui, lasciami aggiungere un intervallo con il distanziatore flex di classe che
abbiamo introdotto nel nostro
file SCSS per la nostra applicazione.
Quindi, avevamo introdotto il distanziatore flexor nel file styles.scss qui,
proprio qui sotto.
Quindi, questa è la classe che useremo con uno span qui.
Quindi, quando si applica il distanziatore flessore allo span,
ciò che fa è fornire abbastanza spazio tra
l'elemento precedente e l'elemento che segue qui.
Quindi, spingerà qualsiasi elemento che segue l'estensione
al bordo più a destra dello schermo il più lontano possibile.
Quindi, qui, dopo questo,
lasciami aggiungere un pulsante qui.
Quindi, questo pulsante che quando cliccato
invocherà una funzione chiamata OpenLogInformation.
Quindi, come si rende conto,
quindi questo è dove stiamo andando a sostenere un modulo per la nostra domanda.
Vedremo come si sviluppa la forma nel prossimo esercizio.
Ora, per questo, lasciami aggiungere
le icone impressionanti font corrispondenti.
Quindi, dirò fa fa-sign-in,
e anche aggiungere in fa-lg a quello.
Quindi, che aggiungerà un'icona,
l'icona di accesso qui,
e quindi seguendo questo,
metteremo la parola login in lì.
Quindi, questo creerà un pulsante chiamato login nella barra degli strumenti sul
bordo destro dello schermo insieme all'icona di accesso lì,
che quando si fa clic, aprirà un modulo di accesso.
Questo modulo di login sarà ospitato all'interno di un componente di dialogo materiale.
Ora, per creare una componente di dialogo, ovviamente,
ci rendiamo conto che quello sta per essere un componente che
deve essere sovrapposto in cima alla vista attuale lì.
Quindi, abbiamo bisogno di un altro componente da aggiungere alla nostra applicazione.
Quindi, andiamo al terminale e quindi aggiungiamo un altro componente nella nostra applicazione.
Andando al terminale, lasciami digitare ng g componente login.
Quindi, abbiamo aggiunto un nuovo componente chiamato come componente di accesso alla nostra applicazione.
Una volta aggiunto il componente di login,
andiamo a configurare il componente di login per essere un componente di dialogo nella nostra applicazione.
Quindi, per farlo, torniamo al nostro codice.
Tornando al nostro codice,
ora vediamo che il componente di login è ora aperto.
Permettetemi di aprire il file di login component.ts.
Quindi, configurare questo come
componente di dialogo nell'applicazione angolare utilizzando il componente di dialogo materiale.
Lasciami importare MatDialog.
Quindi, questo è il componente che supporta
il componente di dialogo nel materiale angolare e quindi
lascia anche importare MatdialogRef e questi sono importati
da materiale angolare qui.
Questo ci permetterà di creare la nostra componente e di trasformarla in una componente di dialogo.
Ora, dopo questo, andiamo avanti e poi configurare il nostro file di modello qui.
Quindi, andando al file modello qui,
ho intenzione di creare questo come dire mat-toolbar.
Quindi, all'interno di questo dialogo anche sto andando a visualizzare una barra degli strumenti.
Per questa barra degli strumenti, dirò login proprio in alto, a seguito di che,
introdurremo la classe distanziatore
flex qui e poi dopo la classe distanziatore flex,
aggiungeremo in un pulsante
con gli attributi mat-button mat-dialalog-close.
Quindi, questo mat-dialalog-close è qualcosa che i componenti di dialogo supportano per noi,
questo attributo che trasforma questo pulsante in
un pulsante che quando cliccato chiuderà questo dialogo lì.
All' interno di questo pulsante, ho intenzione di usare un tempo lì dentro.
Quindi, questo lo mostrerà come una croce sullo schermo lì.
Quindi, questo è il pulsante che aggiungeremo nel dialogo.
In questo momento, il nostro dialogo contiene solo questo a suo parere.
Ora, per permetterci di includere la componente di dialogo e farne uso
, ovviamente, dobbiamo andare al modulo app.
Nel modulo app,
abbiamo bisogno di importare il modulo corrispondente che supporta componente di dialogo.
Quindi, importeremo il MatDiaLogueModule
dalla finestra di dialogo del materiale angolare.
Quindi, questo aggiungerà il modulo di dialogo nella nostra applicazione e poi, come ci si aspetta,
dovranno scendere qui nelle importazioni e quindi importare
quel modulo di dialogo nella nostra applicazione.
Non solo questo, ora,
al fine di trasformare un componente angolare in un componente di dialogo,
abbiamo anche bisogno di dichiarare quel componente come componente di entrata.
Ora, ricorda che abbiamo aggiunto nel componente di login alla nostra applicazione e quindi
questo componente di login è già aggiunto lì e
quindi anche incluso nelle dichiarazioni.
Ora, se vuoi usarlo come sovrapposizione con il componente della finestra di dialogo del materiale,
dobbiamo anche includerlo in un'altra proprietà chiamata come
componenti di entrata nel nostro decoratore del modulo ng qui.
Quindi, all'interno di questi componenti di voce,
ho anche bisogno di includere il componente di login qui.
Ora, questo ci permetterà di utilizzare
il componente di login come sovrapposizione sulla parte superiore dello schermo corrente.
Quindi, una volta aggiornato il componente materiale angolare,
ora, dobbiamo essere in grado di attivare questo componente di login.
Ora, abbiamo aggiunto il pulsante nel
componente di intestazione e poi qui abbiamo questa funzione chiamata modulo di accesso aperto.
Quindi, questo deve innescare la dimostrazione del dialogo.
Quindi, andando nel file component.ts dell'intestazione,
per utilizzare il componente di dialogo mat nel componente intestazione,
lasciami importare MatDialog e quindi
MatdialogRef dal materiale angolare.
All' interno di questa funzione, nel costruttore,
lasciami iniettare
il dialogo come matDialog.
Quindi, questo è un servizio che ci permette di aprire il componente come componente di dialogo.
Ora, come funziona?
Quindi, qui, abbiamo bisogno di aggiungere in questa funzione chiamata OpenLogInform,
che quando invocato dovrebbe innescare la visualizzazione del componente di dialogo.
Quindi, per questo, diremo, questa finestra di
dialogo, e questa finestra di dialogo supporta una funzione chiamata
aperta a cui forniamo
il componente che fungerà da vista per il dialogo che si sovrappone alla vista web corrente.
Quindi, qui, come ci rendiamo conto,
abbiamo dichiarato il componente di login come componente di dialogo.
Quindi, invocheremo il componente di login
e poi anche specificheremo una dimensione per la finestra di dialogo.
Se lo si desidera,
è possibile consentire la visualizzazione della dimensione predefinita,
ma è anche possibile configurare la dimensione in modo esplicito, se lo si desidera.
Quindi, in questo caso,
lasciami configurare la larghezza e l'altezza di questa finestra di dialogo.
Non devi necessariamente farlo, se non lo fai,
allora il dialogo verrà mostrato nella dimensione standard predefinita qui.
Quindi, con questo, il mio componente di intestazione
è ora configurato in modo tale che quando viene invocato il modulo di accesso aperto,
questo ci consentirà di aprire
il componente di accesso come dialogo e quindi mostrarlo sopra la stringa corrente.
Quindi, salviamo tutte le modifiche e poi andiamo
a dare un'occhiata alla nostra applicazione nel browser.
Andando al browser, vedrete ora che sul bordo destro dello schermo,
abbiamo un altro nuovo pulsante qui chiamato il pulsante di accesso,
e vedere che segno in carattere impressionante icona aggiunto a questo.
Ora, quando fai clic sul pulsante di accesso,
vedrai immediatamente una finestra di dialogo pop-up sullo schermo.
Ancora una volta, è possibile ignorare che facendo clic in qualsiasi punto dello schermo al di fuori
della finestra di dialogo o si fa clic su di esso e quindi la finestra di dialogo si apre sullo schermo.
Quindi, da Bootstrap, hai visto il modale in Bootstrap.
Quindi, questo è esattamente come il modale di Bootstrap.
Quindi, qui, abbiamo la finestra di dialogo che si apre sullo schermo.
Ora, abbiamo spazio sulla finestra di dialogo in cui ora possiamo mettere
in contenuto che abbiamo bisogno di visualizzare quando questa finestra di dialogo viene richiamata.
Si noti anche questo pulsante di chiusura qui.
Quindi, quando si fa clic su questo,
anche il dialogo viene respinto.
Ora, quando si fa clic in qualsiasi punto della finestra di dialogo,
non succede nulla, ma quando si fa clic su questo pulsante, la finestra di dialogo viene chiusa.
Quindi, questo è il modo in cui il componente di dialogo dal materiale angolare funziona nella nostra applicazione.
Il passo successivo è quello di aggiungere il modulo di accesso a questa finestra di dialogo.
Con questo, completiamo questo esercizio.
In questo esercizio, avete visto come possiamo utilizzare la finestra di dialogo Materiale angolare per
aggiungere una sovrapposizione alla nostra applicazione e mostrarla in cima alla vista corrente.
Aggiungeremo il modulo a questo.
Questo è un buon momento per fare un commit Git con le finestre di dialogo dei messaggi.