1
00:00:00,000 --> 00:00:04,740
[MUSIC]

2
00:00:04,740 --> 00:00:09,772
Utilizzando il router angolare, abbiamo già imparato come possiamo navigare

3
00:00:09,772 --> 00:00:15,673
da una vista all'altra utilizzando la direttiva collegamento router per specificare il collegamento.

4
00:00:15,673 --> 00:00:21,823
E anche il modulo router, che ci consente con le specifiche del percorso, di

5
00:00:21,823 --> 00:00:26,715
navigare alle viste dei diversi componenti.

6
00:00:26,715 --> 00:00:31,265
Ora, prendiamo un esempio del componente dishdetail.

7
00:00:31,265 --> 00:00:36,680
Finora, il componente dishdetail ha lavorato ricevendo i dettagli

8
00:00:36,680 --> 00:00:42,270
del piatto specifico che deve visualizzare dal componente menu.

9
00:00:42,270 --> 00:00:47,211
Ma questo è stato facilitato perché il componente dishdetail aveva una proprietà

10
00:00:47,211 --> 00:00:49,290
che stava inviando il valore.

11
00:00:49,290 --> 00:00:52,201
E poi stavamo usando il decoratore di input per

12
00:00:52,201 --> 00:00:57,027
la variabile all'interno del componente dishdetail per ottenere quel valore che

13
00:00:57,027 --> 00:01:00,800
veniva passato dal componente del menu.

14
00:01:00,800 --> 00:01:06,120
Ora, quando questi componenti vengono instradati utilizzando un router,

15
00:01:06,120 --> 00:01:10,440
questa connessione tra i componenti non esiste più.

16
00:01:10,440 --> 00:01:13,995
Quindi abbiamo bisogno di sfruttare il router angolare per essere in grado di passare

17
00:01:13,995 --> 00:01:17,560
le informazioni da un componente all'altro componente.

18
00:01:17,560 --> 00:01:22,140
E questo di solito è fatto sotto forma di parametri.

19
00:01:22,140 --> 00:01:25,940
Parametri che possono essere specificati come parametri di percorso,

20
00:01:25,940 --> 00:01:29,600
come impareremo un po 'più tardi, o parametri di query.

21
00:01:31,480 --> 00:01:34,320
Quindi, per il router angolare, quello che abbiamo imparato

22
00:01:34,320 --> 00:01:38,890
finora è che i percorsi sono tutti specificati come URL.

23
00:01:38,890 --> 00:01:43,532
Supponiamo di avere la necessità di passare un valore di parametro da un componente a

24
00:01:43,532 --> 00:01:44,980
un altro componente.

25
00:01:44,980 --> 00:01:46,820
Allora come lo facciamo?

26
00:01:46,820 --> 00:01:50,550
Ora, l'unico modo in cui si sta comunicando tra i componenti

27
00:01:50,550 --> 00:01:52,125
è utilizzando il collegamento del router.

28
00:01:52,125 --> 00:01:54,570
e/o

29
00:01:54,570 --> 00:01:58,820
utilizzare il modulo router per eseguire la navigazione da un componente a un altro componente.

30
00:01:58,820 --> 00:02:06,370
Ora, questo è dove la possibilità di specificare i valori dei parametri all'interno dell'URL per

31
00:02:06,370 --> 00:02:12,070
un componente, il percorso per un componente, ci permette di passare queste informazioni.

32
00:02:12,070 --> 00:02:16,690
Quindi, per esempio, se vogliamo essere in grado di visualizzare un piatto

33
00:02:16,690 --> 00:02:20,450
con un id 42 nel componente dishdetail.

34
00:02:20,450 --> 00:02:25,680
Se avessimo la possibilità di specificare qualcosa come/dishdetail/42.

35
00:02:25,680 --> 00:02:31,780
E poi lascia che il dishdetail raccolga direttamente il numero 42 dall'URL.

36
00:02:31,780 --> 00:02:37,000
Poi abbiamo facilitato un meccanismo per trasmettere queste informazioni

37
00:02:37,000 --> 00:02:42,710
un componente ad un altro componente quando stiamo navigando verso l'altro componente.

38
00:02:42,710 --> 00:02:47,389
Questo è ciò che nel modulo Angular Router viene definito un parametro di route.

39
00:02:48,560 --> 00:02:50,400
Come funziona un parametro di route?

40
00:02:50,400 --> 00:02:54,410
Pertanto, quando si specifica un parametro route nella definizione del percorso,

41
00:02:54,410 --> 00:02:57,260
questo parametro route viene specificato utilizzando un token.

42
00:02:57,260 --> 00:03:02,300
Quindi, quando si specifica il percorso nella specifica del percorso per

43
00:03:02,300 --> 00:03:05,600
i percorsi, è necessario specificare un percorso come questo.

44
00:03:05,600 --> 00:03:09,952
Quindi,

45
00:03:09,952 --> 00:03:14,750
dove id diventa il token che porta il

46
00:03:14,750 --> 00:03:18,359
parametro route al componente specifico.

47
00:03:18,359 --> 00:03:21,200
Il componente dishdetail in questo esempio.

48
00:03:21,200 --> 00:03:25,002
In questo modo, è possibile specificare un parametro route nel percorso.

49
00:03:25,002 --> 00:03:30,098
E poi da un'altra posizione, puoi passare il parametro

50
00:03:30,098 --> 00:03:34,810
al particolare componente che ha bisogno di questo parametro.

51
00:03:34,810 --> 00:03:37,240
Il componente dishdetail in questo esempio.

52
00:03:38,810 --> 00:03:42,510
Ora, la prossima domanda importante che sorgerà nella tua mente è,

53
00:03:42,510 --> 00:03:44,610
come passiamo questo parametro di percorso?

54
00:03:44,610 --> 00:03:50,134
Ora, quando ci penserai, quando navighi attraverso il componente dishdetail.

55
00:03:50,134 --> 00:03:55,255
Stai entrando da un altro componente facendo clic su un link o usando

56
00:03:55,255 --> 00:04:01,020
qualcosa chiamato la funzione di navigazione come il modulo di percorso fornisce per noi.

57
00:04:01,020 --> 00:04:06,240
Esamineremo entrambi i modi di navigare a un particolare componente.

58
00:04:06,240 --> 00:04:11,222
Ora, se hai bisogno di specificare il parametro route, quando specifichi il link,

59
00:04:11,222 --> 00:04:16,070
ricorda che stavamo specificando il link usando la

60
00:04:16,070 --> 00:04:20,750
direttiva del collegamento del router nei nostri file di modello.

61
00:04:20,750 --> 00:04:23,470
Ora, se hai intenzione di specificare questo nei file di modello,

62
00:04:23,470 --> 00:04:29,040
allora il collegamento del router prende anche un array come vediamo.

63
00:04:29,040 --> 00:04:31,500
Un array di parametri di collegamento,

64
00:04:31,500 --> 00:04:35,170
in cui è possibile specificare esplicitamente il parametro che viene trasmesso.

65
00:04:35,170 --> 00:04:40,480
Quindi, per esempio, in questo esempio che vedete qui, stiamo specificando un.

66
00:04:40,480 --> 00:04:42,850
E poi si sta facendo un ngFor.

67
00:04:42,850 --> 00:04:47,723
Quindi stai eseguendo il ciclo attraverso un insieme di oggetti JavaScript in

68
00:04:47,723 --> 00:04:50,720
un array di oggetti JavaScript.

69
00:04:50,720 --> 00:04:52,860
Quindi, quando si specifica il collegamento del router.

70
00:04:52,860 --> 00:04:55,770
Quindi all'interno di lì, puoi specificare il collegamento del router.

71
00:04:55,770 --> 00:04:58,260
Ma ora, circondato da parentesi quadre.

72
00:04:58,260 --> 00:05:05,150
E questo prenderà in un valore come questo ha un array di parametri di collegamento.

73
00:05:05,150 --> 00:05:08,768
Quindi qui, puoi specificare diverse parti del parametro di collegamento.

74
00:05:08,768 --> 00:05:15,370
E Angular Router li unirà insieme per formare l'URL effettivo.

75
00:05:15,370 --> 00:05:19,300
Quindi qui, puoi vedere che la prima parte del parametro link è specificata

76
00:05:19,300 --> 00:05:23,640
come una stringa qui, quindi /dishdetail qui.

77
00:05:23,640 --> 00:05:28,970
Ma la seconda parte è specificata come un valore che si ottiene

78
00:05:28,970 --> 00:05:30,070
dal piatto.

79
00:05:31,130 --> 00:05:38,710
Qual è il piatto, l'oggetto JavaScript dalla matrice di oggetti JavaScript qui.

80
00:05:38,710 --> 00:05:41,204
Quindi ogni piatto porterà un dish.id.

81
00:05:41,204 --> 00:05:44,090
Quindi il dish.id può essere specificato come

82
00:05:44,090 --> 00:05:47,640
uno dei valori all'interno di questo array di parametri di collegamento qui.

83
00:05:47,640 --> 00:05:52,170
Quindi, quando clicchi su questo, per il piatto specifico,

84
00:05:52,170 --> 00:05:57,130
questo piatto.id sarà sostituito dall'id specifico per il piatto.

85
00:05:57,130 --> 00:06:01,890
Quindi, ad esempio, se l'id è 42, allora questo sarà sostituito da 42.

86
00:06:01,890 --> 00:06:06,779
Quindi, quando il router angolare riceve questo collegamento router,

87
00:06:06,779 --> 00:06:11,783
allora costruirà l'URL come/dishdetail/42.

88
00:06:11,783 --> 00:06:17,010
Il 42 è il valore del dish.id a questo punto.

89
00:06:17,010 --> 00:06:19,630
Quindi è così che puoi passare il parametro.

90
00:06:19,630 --> 00:06:21,500
La seconda parte della domanda, ovviamente,

91
00:06:21,500 --> 00:06:27,790
è in che modo il componente recupera questo valore dal parametro link? Di

92
00:06:27,790 --> 00:06:30,130
cui parleremo nella prossima diapositiva.

93
00:06:31,320 --> 00:06:36,380
Un altro modo che è possibile causare questa navigazione all'altro componente

94
00:06:36,380 --> 00:06:42,380
è anche quello di utilizzare un metodo chiamato navigate fornito dal modulo router.

95
00:06:42,380 --> 00:06:44,740
Quindi puoi dire, questo.router.navigate.

96
00:06:44,740 --> 00:06:47,888
Quindi questo può essere incluso nel tuo codice TypeScript o nel

97
00:06:47,888 --> 00:06:53,250
tuo codice JavaScript per causare automaticamente la navigazione verso l'altro.

98
00:06:53,250 --> 00:06:58,337
Quindi questo potrebbe essere incluso all'interno di un metodo che

99
00:06:58,337 --> 00:07:03,432
includi nel codice TypeScript del tuo componente.

100
00:07:03,432 --> 00:07:08,575
E questo può essere invocato dal tuo modello.

101
00:07:08,575 --> 00:07:11,921
Dì, ad esempio, facendo clic su un link lì.

102
00:07:11,921 --> 00:07:17,097
Quindi dentro di lì nel codice, puoi includere un'istruzione come questa,

103
00:07:17,097 --> 00:07:19,582
this.router.navigate.

104
00:07:19,582 --> 00:07:24,152
E questo metodo naviga prende lo stesso array di parametri di collegamento

105
00:07:24,152 --> 00:07:27,466
come il valore del parametro.

106
00:07:27,466 --> 00:07:33,056
Quindi questo consentirà anche di fornire queste informazioni al router angolare in modo

107
00:07:33,056 --> 00:07:37,186
che possa navigare verso l'altro componente.

108
00:07:37,186 --> 00:07:43,246
Ora, andiamo dall'altra parte di questa equazione.

109
00:07:43,246 --> 00:07:50,466
In che modo un componente, come il componente dishdetail in questo esempio,

110
00:07:50,466 --> 00:07:57,821
recupera questo valore specificato come token nel collegamento URL lì?

111
00:07:57,821 --> 00:08:02,789
Ora, questo è dove la libreria Angular Router fornisce

112
00:08:02,789 --> 00:08:07,940
un servizio chiamato come il servizio ActivatedRoute.

113
00:08:07,940 --> 00:08:12,913
Questo servizio ActivatedRoute può essere sfruttato per essere in grado di recuperare

114
00:08:12,913 --> 00:08:14,360
questi valori.

115
00:08:14,360 --> 00:08:18,556
Ora, in particolare, per facilitare il recupero di questo parametro,

116
00:08:18,556 --> 00:08:22,689
il servizio ActivatedRoute fornisce tre cose diverse.

117
00:08:22,689 --> 00:08:29,140
Ad esempio, fornisce questo metodo per recuperare l'URL.

118
00:08:29,140 --> 00:08:32,198
Che è un osservabile del percorso.

119
00:08:32,198 --> 00:08:37,085
Che è rappresentato come una matrice di stringhe per ogni percorso di percorso.

120
00:08:37,085 --> 00:08:39,271
Hai incontrato questa parola osservabile qui.

121
00:08:39,271 --> 00:08:41,770
Per il momento, aggrappati a quella parola.

122
00:08:41,770 --> 00:08:46,250
Torneremo, guarderemo cosa c'è un osservabile nel prossimo modulo.

123
00:08:46,250 --> 00:08:49,190
Ma per il momento, quello che abbiamo capito è che questo

124
00:08:49,190 --> 00:08:52,430
servizio ActivatedRoute fornisce questo osservabile.

125
00:08:53,970 --> 00:08:58,920
Allo stesso modo, il servizio ActivatedRoute fornisce anche un altro osservabile chiamato parametri.

126
00:08:58,920 --> 00:09:03,920
Questo parametro osservabile rende disponibili a un componente

127
00:09:03,920 --> 00:09:07,990
i valori dei parametri che vengono passati come parametro route.

128
00:09:07,990 --> 00:09:12,260
Quindi questo parametro osservabile è quello che useremo per

129
00:09:12,260 --> 00:09:15,740
recuperare questo valore all'interno del componente dishdetail.

130
00:09:15,740 --> 00:09:18,290
Vedrai il metodo esatto per farlo

131
00:09:18,290 --> 00:09:21,860
nell'esercizio che segue questa lezione.

132
00:09:21,860 --> 00:09:29,740
Allo stesso modo, è anche possibile passare i parametri di query a un altro componente.

133
00:09:29,740 --> 00:09:33,185
Ora, non abbiamo intenzione di trattare con un esempio dei parametri di query in questo momento.

134
00:09:33,185 --> 00:09:39,480
Ma in seguito, potremmo incontrare un esempio di come è possibile passare

135
00:09:39,480 --> 00:09:46,010
i parametri di query attraverso il servizio ActivatedRoute a un altro componente.

136
00:09:46,010 --> 00:09:50,870
Con questa comprensione, andiamo avanti al prossimo esercizio.

137
00:09:50,870 --> 00:09:54,790
Continueremo a sviluppare l'applicazione a pagina singola.

138
00:09:54,790 --> 00:09:59,517
E poi abilitare l'uso di un parametro route per passare

139
00:09:59,517 --> 00:10:03,605
l'id di un piatto al componente dishdetail. In

140
00:10:03,605 --> 00:10:09,990
modo che il componente dishdetail, a sua volta, possa utilizzare questo id per interrogare il servizio piatto.

141
00:10:09,990 --> 00:10:14,280
Per ottenere i dettagli di quel piatto specifico che

142
00:10:14,280 --> 00:10:17,406
dovrebbe mostrare all'interno della sua vista.

143
00:10:17,406 --> 00:10:24,269
[ MUSIC]