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

2
00:00:04,740 --> 00:00:09,772
Usando el Router Angular, ya hemos aprendido cómo podemos navegar

3
00:00:09,772 --> 00:00:15,673
de una vista a otra usando la directiva de enlace del router para especificar el enlace.

4
00:00:15,673 --> 00:00:21,823
Y también el módulo router, que nos permite con la especificación de la ruta,

5
00:00:21,823 --> 00:00:26,715
para navegar a las vistas de los diferentes componentes.

6
00:00:26,715 --> 00:00:31,265
Ahora, tomemos un ejemplo del componente dishdetail.

7
00:00:31,265 --> 00:00:36,680
Hasta ahora, el componente dishdetail ha estado funcionando recibiendo los detalles

8
00:00:36,680 --> 00:00:42,270
del plato específico que necesita mostrar desde el componente menu.

9
00:00:42,270 --> 00:00:47,211
Pero esto fue facilitado porque el componente de detalle de la vajilla tenía una propiedad

10
00:00:47,211 --> 00:00:49,290
que enviaba el valor.

11
00:00:49,290 --> 00:00:52,201
Y luego estábamos usando el decorador de entrada para

12
00:00:52,201 --> 00:00:57,027
la variable dentro del componente dishdetail para obtener ese valor que

13
00:00:57,027 --> 00:01:00,800
se estaba pasando desde el componente menu.

14
00:01:00,800 --> 00:01:06,120
Ahora, cuando se están enrutando estos componentes a través de un router,

15
00:01:06,120 --> 00:01:10,440
esta conexión entre los componentes ya no existe.

16
00:01:10,440 --> 00:01:13,995
Así que necesitamos aprovechar el Router Angular para poder pasar información

17
00:01:13,995 --> 00:01:17,560
de un componente al otro componente.

18
00:01:17,560 --> 00:01:22,140
Y esto generalmente se hace en forma de parámetros.

19
00:01:22,140 --> 00:01:25,940
Parámetros que se pueden especificar como parámetros de ruta,

20
00:01:25,940 --> 00:01:29,600
como vamos a aprender un poco más tarde, o parámetros de consulta.

21
00:01:31,480 --> 00:01:34,320
Así que para el Router Angular, lo que hemos aprendido hasta ahora

22
00:01:34,320 --> 00:01:38,890
es que las rutas se especifican como una URL.

23
00:01:38,890 --> 00:01:43,532
Supongamos que tiene la necesidad de pasar un valor de parámetro de un componente a

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

25
00:01:44,980 --> 00:01:46,820
Entonces, ¿cómo hacemos eso?

26
00:01:46,820 --> 00:01:50,550
Ahora, la única forma de comunicarse entre los componentes

27
00:01:50,550 --> 00:01:52,125
es mediante el enlace del router.

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

29
00:01:54,570 --> 00:01:58,820
utilizar el módulo del router para hacer la navegación de un componente a otro componente.

30
00:01:58,820 --> 00:02:06,370
Ahora, aquí es donde la capacidad de especificar valores de parámetros dentro de la URL para

31
00:02:06,370 --> 00:02:12,070
un componente, la ruta de un componente, nos permite pasar esta información.

32
00:02:12,070 --> 00:02:16,690
Entonces, por ejemplo, si queremos poder mostrar un plato

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

34
00:02:20,450 --> 00:02:25,680
Si tuviéramos la capacidad de especificar algo como /dishdetail/42.

35
00:02:25,680 --> 00:02:31,780
Y luego deja que el detalle de la vajilla recoja el número 42 de la URL directamente.

36
00:02:31,780 --> 00:02:37,000
Entonces hemos facilitado un mecanismo para transmitir esta información

37
00:02:37,000 --> 00:02:42,710
un componente a otro componente cuando estamos navegando hacia el otro componente.

38
00:02:42,710 --> 00:02:47,389
Esto es lo que en el módulo Angular Router se conoce como un parámetro de ruta.

39
00:02:48,560 --> 00:02:50,400
¿Cómo funciona un parámetro de ruta?

40
00:02:50,400 --> 00:02:54,410
Así que cuando se especifica un parámetro de ruta en la definición de ruta,

41
00:02:54,410 --> 00:02:57,260
este parámetro de ruta se especifica utilizando un token.

42
00:02:57,260 --> 00:03:02,300
Así que cuando especifica la ruta en la especificación de ruta para

43
00:03:02,300 --> 00:03:05,600
las rutas, especificaría una ruta como esta.

44
00:03:05,600 --> 00:03:09,952
Así que dirías, dishdetail/:id.

45
00:03:09,952 --> 00:03:14,750
Entonces, donde id se convierte en el token que lleva el parámetro de ruta

46
00:03:14,750 --> 00:03:18,359
al componente específico.

47
00:03:18,359 --> 00:03:21,200
El componente dishdetail en este ejemplo.

48
00:03:21,200 --> 00:03:25,002
De esta manera, puede especificar un parámetro de ruta en la ruta.

49
00:03:25,002 --> 00:03:30,098
Y luego desde otra ubicación, puede pasar el parámetro

50
00:03:30,098 --> 00:03:34,810
al componente particular que necesita este parámetro.

51
00:03:34,810 --> 00:03:37,240
El componente dishdetail en este ejemplo.

52
00:03:38,810 --> 00:03:42,510
Ahora, la siguiente pregunta importante que surgirá en su mente es,

53
00:03:42,510 --> 00:03:44,610
¿cómo pasamos este parámetro de ruta?

54
00:03:44,610 --> 00:03:50,134
Ahora, cuando lo pensarás, cuando navegues a través del componente de detalle de vajilla.

55
00:03:50,134 --> 00:03:55,255
Usted viene de otro componente haciendo clic en un enlace o usando

56
00:03:55,255 --> 00:04:01,020
algo llamado la función de navegación como el módulo de ruta proporciona para nosotros.

57
00:04:01,020 --> 00:04:06,240
Veremos ambas formas de navegar a un componente en particular.

58
00:04:06,240 --> 00:04:11,222
Ahora, si necesita especificar el parámetro de ruta, cuando especifique el enlace,

59
00:04:11,222 --> 00:04:16,070
recuerde que estábamos especificando el enlace usando la directiva de enlace

60
00:04:16,070 --> 00:04:20,750
del router en nuestros archivos de plantilla.

61
00:04:20,750 --> 00:04:23,470
Ahora, si va a especificar esto en los archivos de plantilla,

62
00:04:23,470 --> 00:04:29,040
entonces el enlace del router también toma una matriz como vemos.

63
00:04:29,040 --> 00:04:31,500
Una matriz de parámetros de enlace,

64
00:04:31,500 --> 00:04:35,170
donde puede especificar explícitamente el parámetro que se está transmitiendo.

65
00:04:35,170 --> 00:04:40,480
Así que, por ejemplo, en este ejemplo que ves aquí, estamos especificando a.

66
00:04:40,480 --> 00:04:42,850
Y entonces estás haciendo un ngFor.

67
00:04:42,850 --> 00:04:47,723
Entonces está recorriendo un conjunto de objetos JavaScript en

68
00:04:47,723 --> 00:04:50,720
una matriz de objetos JavaScript.

69
00:04:50,720 --> 00:04:52,860
A continuación, cuando especifique el enlace del enrutador.

70
00:04:52,860 --> 00:04:55,770
Así que dentro de allí, puede especificar el enlace del enrutador.

71
00:04:55,770 --> 00:04:58,260
Pero ahora, rodeado de corchetes.

72
00:04:58,260 --> 00:05:05,150
Y esto tomará un valor como este tiene una matriz de parámetros de enlace.

73
00:05:05,150 --> 00:05:08,768
Así que aquí, puede especificar diferentes partes del parámetro de enlace.

74
00:05:08,768 --> 00:05:15,370
Y Angular Router los unirá para formar la URL real.

75
00:05:15,370 --> 00:05:19,300
Así que aquí, puede ver que la primera parte del parámetro link se especifica

76
00:05:19,300 --> 00:05:23,640
como una cadena aquí, por lo que /dishdetail aquí.

77
00:05:23,640 --> 00:05:28,970
Pero la segunda parte se especifica como un valor que se está obteniendo

78
00:05:28,970 --> 00:05:30,070
del plato.

79
00:05:31,130 --> 00:05:38,710
¿Cuál es el plato, el objeto JavaScript de la matriz de objetos JavaScript aquí.

80
00:05:38,710 --> 00:05:41,204
Así que cada plato llevará un dish.id.

81
00:05:41,204 --> 00:05:44,090
Así que el dish.id se puede especificar como

82
00:05:44,090 --> 00:05:47,640
uno de los valores dentro de esta matriz de parámetros de enlace aquí.

83
00:05:47,640 --> 00:05:52,170
Así que cuando haga clic en esto, para el plato específico,

84
00:05:52,170 --> 00:05:57,130
este dish.id será sustituido por el id específico para el plato.

85
00:05:57,130 --> 00:06:01,890
Entonces, por ejemplo, si el id es 42, entonces esto será reemplazado por 42.

86
00:06:01,890 --> 00:06:06,779
Así que cuando el Router Angular reciba este enlace del router,

87
00:06:06,779 --> 00:06:11,783
construirá la URL como /dishdetail/42.

88
00:06:11,783 --> 00:06:17,010
El 42 siendo el valor del dish.id en este punto.

89
00:06:17,010 --> 00:06:19,630
Entonces así es como puedes pasar el parámetro.

90
00:06:19,630 --> 00:06:21,500
La segunda parte de la pregunta, por supuesto,

91
00:06:21,500 --> 00:06:27,790
es cómo recupera el componente este valor del parámetro de enlace?

92
00:06:27,790 --> 00:06:30,130
De lo que hablaremos en la próxima diapositiva.

93
00:06:31,320 --> 00:06:36,380
Otra forma en la que puede hacer que esta navegación al otro componente

94
00:06:36,380 --> 00:06:42,380
es también utilizar un método llamado navigate que es proporcionado por el módulo del router.

95
00:06:42,380 --> 00:06:44,740
Así que puedes decir, this.router.navigate.

96
00:06:44,740 --> 00:06:47,888
Así que esto se puede incluir en su código TypeScript o

97
00:06:47,888 --> 00:06:53,250
su código JavaScript para provocar automáticamente la navegación hacia el otro.

98
00:06:53,250 --> 00:06:58,337
Entonces esto podría incluirse dentro de un método que

99
00:06:58,337 --> 00:07:03,432
incluya en el código TypeScript de su componente.

100
00:07:03,432 --> 00:07:08,575
Y eso se puede invocar desde su plantilla.

101
00:07:08,575 --> 00:07:11,921
Digamos, por ejemplo, haciendo clic en un enlace allí.

102
00:07:11,921 --> 00:07:17,097
Así que dentro de allí en el código, puede incluir una declaración como esta,

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

104
00:07:19,582 --> 00:07:24,152
Y este método de navegación toma la misma matriz de parámetros de enlace

105
00:07:24,152 --> 00:07:27,466
que el valor del parámetro.

106
00:07:27,466 --> 00:07:33,056
Así que esto también permitirá que esta información se proporcione al Router Angular para que

107
00:07:33,056 --> 00:07:37,186
pueda navegar al otro componente.

108
00:07:37,186 --> 00:07:43,246
Ahora, vamos al otro lado de esta ecuación.

109
00:07:43,246 --> 00:07:50,466
¿Cómo un componente, como el componente dishdetail en este ejemplo,

110
00:07:50,466 --> 00:07:57,821
recupera este valor que se especifica como el token en el enlace URL allí?

111
00:07:57,821 --> 00:08:02,789
Ahora, aquí es donde la biblioteca Angular Router proporciona

112
00:08:02,789 --> 00:08:07,940
un servicio llamado como el servicio ActivatedRoute.

113
00:08:07,940 --> 00:08:12,913
Este servicio ActivatedRoute se puede aprovechar para poder recuperar

114
00:08:12,913 --> 00:08:14,360
estos valores.

115
00:08:14,360 --> 00:08:18,556
Ahora, en particular, para facilitar la recuperación de este parámetro,

116
00:08:18,556 --> 00:08:22,689
el servicio ActivatedRoute proporciona tres cosas diferentes.

117
00:08:22,689 --> 00:08:29,140
Por ejemplo, proporciona este método para recuperar la URL.

118
00:08:29,140 --> 00:08:32,198
Que es un observable de la ruta de ruta.

119
00:08:32,198 --> 00:08:37,085
Que se representa como una matriz de cadenas para cada ruta de ruta.

120
00:08:37,085 --> 00:08:39,271
Usted ha encontrado esta palabra observable aquí.

121
00:08:39,271 --> 00:08:41,770
Por el momento, aferrarse a esa palabra.

122
00:08:41,770 --> 00:08:46,250
Volveremos, mira lo que es un observable en el siguiente módulo.

123
00:08:46,250 --> 00:08:49,190
Pero por el momento, lo que nos dimos cuenta es que este servicio

124
00:08:49,190 --> 00:08:52,430
ActivatedRoute proporciona esto observable.

125
00:08:53,970 --> 00:08:58,920
Del mismo modo, el servicio ActivatedRoute también proporciona otro parámetro observable llamado.

126
00:08:58,920 --> 00:09:03,920
Este parámetro observable pone a disposición de un componente

127
00:09:03,920 --> 00:09:07,990
los valores de parámetro que se pasan como parámetro de ruta.

128
00:09:07,990 --> 00:09:12,260
Entonces este parámetro observable es el que vamos a usar

129
00:09:12,260 --> 00:09:15,740
para recuperar este valor dentro del componente dishdetail.

130
00:09:15,740 --> 00:09:18,290
Verá el método exacto de hacer ese

131
00:09:18,290 --> 00:09:21,860
en el ejercicio que sigue a esta conferencia.

132
00:09:21,860 --> 00:09:29,740
Del mismo modo, también puede pasar parámetros de consulta a otro componente.

133
00:09:29,740 --> 00:09:33,185
Ahora, no vamos a tratar con un ejemplo de los parámetros de consulta en este momento.

134
00:09:33,185 --> 00:09:39,480
Pero más adelante, podríamos encontrar un ejemplo de cómo puede pasar los parámetros de consulta

135
00:09:39,480 --> 00:09:46,010
a través del servicio ActivatedRoute a otro componente.

136
00:09:46,010 --> 00:09:50,870
Con este entendimiento, pasemos al siguiente ejercicio.

137
00:09:50,870 --> 00:09:54,790
Continuaremos desarrollando la aplicación de una sola página.

138
00:09:54,790 --> 00:09:59,517
Y luego habilite el uso de un parámetro de ruta para pasar en

139
00:09:59,517 --> 00:10:03,605
la identificación de un plato al componente dishdetail.

140
00:10:03,605 --> 00:10:09,990
Para que el componente dishdetail, a su vez, pueda usar esta identificación para consultar el servicio dish.

141
00:10:09,990 --> 00:10:14,280
Para obtener los detalles de ese plato específico que se supone que

142
00:10:14,280 --> 00:10:17,406
debe mostrar dentro de su vista.

143
00:10:17,406 --> 00:10:24,269
[MÚSICA]