1 00:00:04,010 --> 00:00:09,440 Prima di iniziare a moduli modello angolare guidato, 2 00:00:09,440 --> 00:00:15,165 abbiamo bisogno di trovare un modo di sovrapporre il contenuto in cima alla vista web corrente. 3 00:00:15,165 --> 00:00:21,935 Il Bootstrap, abbiamo modelli che ci permettono di sovrapporre il contenuto sulla parte superiore della pagina Web. 4 00:00:21,935 --> 00:00:26,700 Con l'uso del materiale Angular nella nostra applicazione Angular, 5 00:00:26,700 --> 00:00:29,970 il materiale Angular fornisce un componente chiamato come 6 00:00:29,970 --> 00:00:32,820 Componente 7 00:00:32,820 --> 00:00:35,865 Angolare Dialogue che consente di sovrapporre il contenuto sulla parte superiore della vista corrente. 8 00:00:35,865 --> 00:00:42,010 Diamo un'occhiata a come utilizziamo la Componente Dialogo in questo esercizio. 9 00:00:42,080 --> 00:00:45,470 Per iniziare a questo esercizio, 10 00:00:45,470 --> 00:00:49,580 andiamo al nostro codice e abbiamo bisogno 11 00:00:49,580 --> 00:00:54,230 di trovare un modo per attivare l'applicazione per mostrare il dialogo. 12 00:00:54,230 --> 00:00:58,620 Quindi, per farlo, aggiungiamo un pulsante nella nostra barra degli strumenti qui. 13 00:00:58,620 --> 00:01:01,475 Quindi, andando alla barra degli strumenti proprio 14 00:01:01,475 --> 00:01:10,790 in alto qui, lasciami aggiungere un intervallo con il distanziatore flex di classe che 15 00:01:10,790 --> 00:01:18,340 abbiamo introdotto nel nostro 16 00:01:18,340 --> 00:01:21,650 file SCSS per la nostra applicazione. 17 00:01:21,650 --> 00:01:29,170 Quindi, avevamo introdotto il distanziatore flexor nel file styles.scss qui, 18 00:01:29,170 --> 00:01:30,840 proprio qui sotto. 19 00:01:30,840 --> 00:01:34,240 Quindi, questa è la classe che useremo con uno span qui. 20 00:01:34,240 --> 00:01:37,035 Quindi, quando si applica il distanziatore flessore allo span, 21 00:01:37,035 --> 00:01:40,670 ciò che fa è fornire abbastanza spazio tra 22 00:01:40,670 --> 00:01:45,670 l'elemento precedente e l'elemento che segue qui. 23 00:01:45,670 --> 00:01:49,280 Quindi, spingerà qualsiasi elemento che segue l'estensione 24 00:01:49,280 --> 00:01:53,030 al bordo più a destra dello schermo il più lontano possibile. 25 00:01:53,030 --> 00:01:54,985 Quindi, qui, dopo questo, 26 00:01:54,985 --> 00:01:57,500 lasciami aggiungere un pulsante qui. 27 00:01:57,500 --> 00:02:02,755 Quindi, questo pulsante che quando cliccato 28 00:02:02,755 --> 00:02:09,635 invocherà una funzione chiamata OpenLogInformation. 29 00:02:09,635 --> 00:02:11,660 Quindi, come si rende conto, 30 00:02:11,660 --> 00:02:17,865 quindi questo è dove stiamo andando a sostenere un modulo per la nostra domanda. 31 00:02:17,865 --> 00:02:22,475 Vedremo come si sviluppa la forma nel prossimo esercizio. 32 00:02:22,475 --> 00:02:25,330 Ora, per questo, lasciami aggiungere 33 00:02:25,330 --> 00:02:33,120 le icone impressionanti font corrispondenti. 34 00:02:33,120 --> 00:02:38,950 Quindi, dirò fa fa-sign-in, 35 00:02:42,290 --> 00:02:50,010 e anche aggiungere in fa-lg a quello. 36 00:02:50,010 --> 00:02:52,875 Quindi, che aggiungerà un'icona, 37 00:02:52,875 --> 00:02:54,645 l'icona di accesso qui, 38 00:02:54,645 --> 00:02:55,880 e quindi seguendo questo, 39 00:02:55,880 --> 00:02:58,690 metteremo la parola login in lì. 40 00:02:58,690 --> 00:03:05,980 Quindi, questo creerà un pulsante chiamato login nella barra degli strumenti sul 41 00:03:05,980 --> 00:03:14,070 bordo destro dello schermo insieme all'icona di accesso lì, 42 00:03:14,070 --> 00:03:16,960 che quando si fa clic, aprirà un modulo di accesso. 43 00:03:16,960 --> 00:03:22,670 Questo modulo di login sarà ospitato all'interno di un componente di dialogo materiale. 44 00:03:22,670 --> 00:03:26,204 Ora, per creare una componente di dialogo, ovviamente, 45 00:03:26,204 --> 00:03:29,330 ci rendiamo conto che quello sta per essere un componente che 46 00:03:29,330 --> 00:03:32,270 deve essere sovrapposto in cima alla vista attuale lì. 47 00:03:32,270 --> 00:03:36,770 Quindi, abbiamo bisogno di un altro componente da aggiungere alla nostra applicazione. 48 00:03:36,770 --> 00:03:44,095 Quindi, andiamo al terminale e quindi aggiungiamo un altro componente nella nostra applicazione. 49 00:03:44,095 --> 00:03:50,735 Andando al terminale, lasciami digitare ng g componente login. 50 00:03:50,735 --> 00:03:55,725 Quindi, abbiamo aggiunto un nuovo componente chiamato come componente di accesso alla nostra applicazione. 51 00:03:55,725 --> 00:03:57,725 Una volta aggiunto il componente di login, 52 00:03:57,725 --> 00:04:04,490 andiamo a configurare il componente di login per essere un componente di dialogo nella nostra applicazione. 53 00:04:04,490 --> 00:04:08,305 Quindi, per farlo, torniamo al nostro codice. 54 00:04:08,305 --> 00:04:10,215 Tornando al nostro codice, 55 00:04:10,215 --> 00:04:13,715 ora vediamo che il componente di login è ora aperto. 56 00:04:13,715 --> 00:04:16,445 Permettetemi di aprire il file di login component.ts. 57 00:04:16,445 --> 00:04:18,935 Quindi, configurare questo come 58 00:04:18,935 --> 00:04:24,485 componente di dialogo nell'applicazione angolare utilizzando il componente di dialogo materiale. 59 00:04:24,485 --> 00:04:30,385 Lasciami importare MatDialog. 60 00:04:30,385 --> 00:04:32,540 Quindi, questo è il componente che supporta 61 00:04:32,540 --> 00:04:39,480 il componente di dialogo nel materiale angolare e quindi 62 00:04:39,600 --> 00:04:45,545 lascia anche importare MatdialogRef e questi sono importati 63 00:04:45,545 --> 00:04:52,420 da materiale angolare qui. 64 00:04:53,140 --> 00:05:03,750 Questo ci permetterà di creare la nostra componente e di trasformarla in una componente di dialogo. 65 00:05:03,750 --> 00:05:10,030 Ora, dopo questo, andiamo avanti e poi configurare il nostro file di modello qui. 66 00:05:10,030 --> 00:05:11,940 Quindi, andando al file modello qui, 67 00:05:11,940 --> 00:05:16,300 ho intenzione di creare questo come dire mat-toolbar. 68 00:05:16,300 --> 00:05:22,330 Quindi, all'interno di questo dialogo anche sto andando a visualizzare una barra degli strumenti. 69 00:05:25,350 --> 00:05:34,065 Per questa barra degli strumenti, dirò login proprio in alto, a seguito di che, 70 00:05:34,065 --> 00:05:43,920 introdurremo la classe distanziatore 71 00:05:43,920 --> 00:05:49,350 flex qui e poi dopo la classe distanziatore flex, 72 00:05:49,350 --> 00:05:53,169 aggiungeremo in un pulsante 73 00:05:54,590 --> 00:06:04,385 con gli attributi mat-button mat-dialalog-close. 74 00:06:04,385 --> 00:06:09,850 Quindi, questo mat-dialalog-close è qualcosa che i componenti di dialogo supportano per noi, 75 00:06:09,850 --> 00:06:13,490 questo attributo che trasforma questo pulsante in 76 00:06:13,490 --> 00:06:18,255 un pulsante che quando cliccato chiuderà questo dialogo lì. 77 00:06:18,255 --> 00:06:26,740 All' interno di questo pulsante, ho intenzione di usare un tempo lì dentro. 78 00:06:26,740 --> 00:06:30,600 Quindi, questo lo mostrerà come una croce sullo schermo lì. 79 00:06:30,600 --> 00:06:33,110 Quindi, questo è il pulsante che aggiungeremo nel dialogo. 80 00:06:33,110 --> 00:06:38,855 In questo momento, il nostro dialogo contiene solo questo a suo parere. 81 00:06:38,855 --> 00:06:44,870 Ora, per permetterci di includere la componente di dialogo e farne uso 82 00:06:44,870 --> 00:06:47,350 , ovviamente, dobbiamo andare al modulo app. 83 00:06:47,350 --> 00:06:49,030 Nel modulo app, 84 00:06:49,030 --> 00:06:59,190 abbiamo bisogno di importare il modulo corrispondente che supporta componente di dialogo. 85 00:06:59,190 --> 00:07:02,765 Quindi, importeremo il MatDiaLogueModule 86 00:07:02,765 --> 00:07:10,200 dalla finestra di dialogo del materiale angolare. 87 00:07:10,200 --> 00:07:20,300 Quindi, questo aggiungerà il modulo di dialogo nella nostra applicazione e poi, come ci si aspetta, 88 00:07:20,300 --> 00:07:25,070 dovranno scendere qui nelle importazioni e quindi importare 89 00:07:25,070 --> 00:07:30,515 quel modulo di dialogo nella nostra applicazione. 90 00:07:30,515 --> 00:07:32,735 Non solo questo, ora, 91 00:07:32,735 --> 00:07:38,575 al fine di trasformare un componente angolare in un componente di dialogo, 92 00:07:38,575 --> 00:07:44,330 abbiamo anche bisogno di dichiarare quel componente come componente di entrata. 93 00:07:44,330 --> 00:07:49,310 Ora, ricorda che abbiamo aggiunto nel componente di login alla nostra applicazione e quindi 94 00:07:49,310 --> 00:07:51,920 questo componente di login è già aggiunto lì e 95 00:07:51,920 --> 00:07:54,845 quindi anche incluso nelle dichiarazioni. 96 00:07:54,845 --> 00:08:02,255 Ora, se vuoi usarlo come sovrapposizione con il componente della finestra di dialogo del materiale, 97 00:08:02,255 --> 00:08:08,285 dobbiamo anche includerlo in un'altra proprietà chiamata come 98 00:08:08,285 --> 00:08:17,460 componenti di entrata nel nostro decoratore del modulo ng qui. 99 00:08:17,460 --> 00:08:19,715 Quindi, all'interno di questi componenti di voce, 100 00:08:19,715 --> 00:08:23,810 ho anche bisogno di includere il componente di login qui. 101 00:08:23,810 --> 00:08:26,000 Ora, questo ci permetterà di utilizzare 102 00:08:26,000 --> 00:08:30,235 il componente di login come sovrapposizione sulla parte superiore dello schermo corrente. 103 00:08:30,235 --> 00:08:35,330 Quindi, una volta aggiornato il componente materiale angolare, 104 00:08:35,330 --> 00:08:39,370 ora, dobbiamo essere in grado di attivare questo componente di login. 105 00:08:39,370 --> 00:08:42,530 Ora, abbiamo aggiunto il pulsante nel 106 00:08:42,530 --> 00:08:47,240 componente di intestazione e poi qui abbiamo questa funzione chiamata modulo di accesso aperto. 107 00:08:47,240 --> 00:08:51,770 Quindi, questo deve innescare la dimostrazione del dialogo. 108 00:08:51,770 --> 00:08:56,350 Quindi, andando nel file component.ts dell'intestazione, 109 00:08:57,410 --> 00:09:04,350 per utilizzare il componente di dialogo mat nel componente intestazione, 110 00:09:04,350 --> 00:09:12,420 lasciami importare MatDialog e quindi 111 00:09:12,420 --> 00:09:22,605 MatdialogRef dal materiale angolare. 112 00:09:22,605 --> 00:09:26,745 All' interno di questa funzione, nel costruttore, 113 00:09:26,745 --> 00:09:28,575 lasciami iniettare 114 00:09:28,575 --> 00:09:37,365 il dialogo come matDialog. 115 00:09:37,365 --> 00:09:43,680 Quindi, questo è un servizio che ci permette di aprire il componente come componente di dialogo. 116 00:09:43,680 --> 00:09:45,615 Ora, come funziona? 117 00:09:45,615 --> 00:09:50,039 Quindi, qui, abbiamo bisogno di aggiungere in questa funzione chiamata OpenLogInform, 118 00:09:52,090 --> 00:09:57,610 che quando invocato dovrebbe innescare la visualizzazione del componente di dialogo. 119 00:09:57,610 --> 00:10:00,894 Quindi, per questo, diremo, questa finestra di 120 00:10:00,894 --> 00:10:03,860 dialogo, e questa finestra di dialogo supporta una funzione chiamata 121 00:10:03,860 --> 00:10:09,395 aperta a cui forniamo 122 00:10:09,395 --> 00:10:18,170 il componente che fungerà da vista per il dialogo che si sovrappone alla vista web corrente. 123 00:10:18,170 --> 00:10:22,415 Quindi, qui, come ci rendiamo conto, 124 00:10:22,415 --> 00:10:28,475 abbiamo dichiarato il componente di login come componente di dialogo. 125 00:10:28,475 --> 00:10:33,740 Quindi, invocheremo il componente di login 126 00:10:33,740 --> 00:10:39,670 e poi anche specificheremo una dimensione per la finestra di dialogo. 127 00:10:39,670 --> 00:10:40,910 Se lo si desidera, 128 00:10:40,910 --> 00:10:44,089 è possibile consentire la visualizzazione della dimensione predefinita, 129 00:10:44,089 --> 00:10:47,610 ma è anche possibile configurare la dimensione in modo esplicito, se lo si desidera. 130 00:10:47,610 --> 00:10:48,620 Quindi, in questo caso, 131 00:10:48,620 --> 00:10:57,960 lasciami configurare la larghezza e l'altezza di questa finestra di dialogo. 132 00:11:02,370 --> 00:11:05,960 Non devi necessariamente farlo, se non lo fai, 133 00:11:05,960 --> 00:11:11,990 allora il dialogo verrà mostrato nella dimensione standard predefinita qui. 134 00:11:11,990 --> 00:11:16,550 Quindi, con questo, il mio componente di intestazione 135 00:11:16,550 --> 00:11:20,490 è ora configurato in modo tale che quando viene invocato il modulo di accesso aperto, 136 00:11:20,490 --> 00:11:23,765 questo ci consentirà di aprire 137 00:11:23,765 --> 00:11:28,835 il componente di accesso come dialogo e quindi mostrarlo sopra la stringa corrente. 138 00:11:28,835 --> 00:11:32,090 Quindi, salviamo tutte le modifiche e poi andiamo 139 00:11:32,090 --> 00:11:35,605 a dare un'occhiata alla nostra applicazione nel browser. 140 00:11:35,605 --> 00:11:40,310 Andando al browser, vedrete ora che sul bordo destro dello schermo, 141 00:11:40,310 --> 00:11:43,010 abbiamo un altro nuovo pulsante qui chiamato il pulsante di accesso, 142 00:11:43,010 --> 00:11:47,085 e vedere che segno in carattere impressionante icona aggiunto a questo. 143 00:11:47,085 --> 00:11:49,560 Ora, quando fai clic sul pulsante di accesso, 144 00:11:49,560 --> 00:11:53,995 vedrai immediatamente una finestra di dialogo pop-up sullo schermo. 145 00:11:53,995 --> 00:11:58,610 Ancora una volta, è possibile ignorare che facendo clic in qualsiasi punto dello schermo al di fuori 146 00:11:58,610 --> 00:12:03,225 della finestra di dialogo o si fa clic su di esso e quindi la finestra di dialogo si apre sullo schermo. 147 00:12:03,225 --> 00:12:06,840 Quindi, da Bootstrap, hai visto il modale in Bootstrap. 148 00:12:06,840 --> 00:12:10,485 Quindi, questo è esattamente come il modale di Bootstrap. 149 00:12:10,485 --> 00:12:13,645 Quindi, qui, abbiamo la finestra di dialogo che si apre sullo schermo. 150 00:12:13,645 --> 00:12:17,720 Ora, abbiamo spazio sulla finestra di dialogo in cui ora possiamo mettere 151 00:12:17,720 --> 00:12:22,790 in contenuto che abbiamo bisogno di visualizzare quando questa finestra di dialogo viene richiamata. 152 00:12:22,790 --> 00:12:26,120 Si noti anche questo pulsante di chiusura qui. 153 00:12:26,120 --> 00:12:27,260 Quindi, quando si fa clic su questo, 154 00:12:27,260 --> 00:12:29,030 anche il dialogo viene respinto. 155 00:12:29,030 --> 00:12:31,535 Ora, quando si fa clic in qualsiasi punto della finestra di dialogo, 156 00:12:31,535 --> 00:12:36,320 non succede nulla, ma quando si fa clic su questo pulsante, la finestra di dialogo viene chiusa. 157 00:12:36,320 --> 00:12:43,340 Quindi, questo è il modo in cui il componente di dialogo dal materiale angolare funziona nella nostra applicazione. 158 00:12:43,340 --> 00:12:50,005 Il passo successivo è quello di aggiungere il modulo di accesso a questa finestra di dialogo. 159 00:12:50,005 --> 00:12:53,365 Con questo, completiamo questo esercizio. 160 00:12:53,365 --> 00:12:58,250 In questo esercizio, avete visto come possiamo utilizzare la finestra di dialogo Materiale angolare per 161 00:12:58,250 --> 00:13:04,575 aggiungere una sovrapposizione alla nostra applicazione e mostrarla in cima alla vista corrente. 162 00:13:04,575 --> 00:13:07,610 Aggiungeremo il modulo a questo. 163 00:13:07,610 --> 00:13:13,770 Questo è un buon momento per fare un commit Git con le finestre di dialogo dei messaggi.