1
00:00:03,680 --> 00:00:10,440
Agora que você molhou seus pés com observáveis angulares no exercício anterior,

2
00:00:10,440 --> 00:00:11,860
você está olhando para trás e dizendo,

3
00:00:11,860 --> 00:00:14,320
“Oh observáveis não são tão ruins afinal de contas,

4
00:00:14,320 --> 00:00:17,070
eles são bastante simples de fazer uso.”

5
00:00:17,070 --> 00:00:19,125
Então, ficamos um pouco mais ambiciosos.

6
00:00:19,125 --> 00:00:25,080
Vamos dar um passo adiante e, em seguida, fazer uso de um built-in observável dentro Angular.

7
00:00:25,080 --> 00:00:27,960
Os parâmetros observáveis que vem de

8
00:00:27,960 --> 00:00:32,655
o serviço de rota ativado dentro do nosso módulo de roteador.

9
00:00:32,655 --> 00:00:35,940
Vamos agora atualizar o componente de detalhe do prato,

10
00:00:35,940 --> 00:00:39,630
para fazer uso dos parâmetros observáveis de

11
00:00:39,630 --> 00:00:42,770
o serviço de seca ativador para

12
00:00:42,770 --> 00:00:47,975
apoiar alguns novos recursos dentro da nossa aplicação Angular.

13
00:00:47,975 --> 00:00:52,400
Antes de avançarmos para atualizar o componente de detalhe do prato,

14
00:00:52,400 --> 00:00:57,650
Eu quero introduzir mais um método no meu arquivo de serviço de prato. ts.

15
00:00:57,650 --> 00:01:02,735
Então abra o arquivo service.ts prato e, em seguida, vamos adicionar um novo método chamado

16
00:01:02,735 --> 00:01:08,060
GetDishids e isso basicamente vai

17
00:01:08,060 --> 00:01:14,715
retornar todos os IDs prato é para todos os pratos em nossa coleção de pratos.

18
00:01:14,715 --> 00:01:17,650
Então, para fazer isso, vamos usar um retorno

19
00:01:17,650 --> 00:01:26,535
e do método e antes que eu faça isso,

20
00:01:26,535 --> 00:01:31,915
isso está retornando um observável.

21
00:01:31,915 --> 00:01:33,480
De que tipo?

22
00:01:33,480 --> 00:01:38,690
Isso está retornando um observável que consiste em uma matriz de

23
00:01:38,690 --> 00:01:44,510
string e vamos atrasar

24
00:01:44,510 --> 00:01:50,385
por 2.000 milissegundos ou dois segundos.

25
00:01:50,385 --> 00:01:52,415
Então, o que é que queremos retornar?

26
00:01:52,415 --> 00:01:54,895
Queremos levar a matriz de pratos,

27
00:01:54,895 --> 00:01:58,730
extrair todos os IDs da matriz de pratos e

28
00:01:58,730 --> 00:02:02,665
, em seguida, dar ao nosso componente Dish Detail,

29
00:02:02,665 --> 00:02:06,305
porque precisamos que dentro do nosso componente Dish Detail para implementar

30
00:02:06,305 --> 00:02:10,365
o novo recurso que vamos apoiar em nossa aplicação.

31
00:02:10,365 --> 00:02:13,725
Agora, esta é uma maneira que eu quero implementá-lo.

32
00:02:13,725 --> 00:02:18,825
Mais tarde, podemos ver como podemos fazê-lo de uma maneira muito melhor,

33
00:02:18,825 --> 00:02:21,240
em um dos exercícios posteriores.

34
00:02:21,240 --> 00:02:24,680
No momento, com a forma como o serviço é implementado,

35
00:02:24,680 --> 00:02:32,455
este é o melhor que eu poderia fazer para implementar esta solução para demonstrar um novo recurso.

36
00:02:32,455 --> 00:02:33,850
Então, dentro do observável,

37
00:02:33,850 --> 00:02:35,050
o que eu vou fazer é,

38
00:02:35,050 --> 00:02:40,070
Eu vou levar a matriz de pratos e para a matriz de pratos.

39
00:02:40,070 --> 00:02:43,770
Eu vou usar o mapa,

40
00:02:44,020 --> 00:02:49,670
um operador de matriz, o mapa do operador de matriz JavaScript.

41
00:02:49,670 --> 00:02:51,410
Então, o operador de mapa,

42
00:02:51,410 --> 00:02:58,700
como ele funciona é que ele leva cada item da matriz de pratos e podemos mapear

43
00:02:58,700 --> 00:03:01,760
esse item em outro item e, em seguida, construir

44
00:03:01,760 --> 00:03:06,195
outra matriz e, em seguida, retornar essa matriz modificada.

45
00:03:06,195 --> 00:03:10,520
Então, para cada item na minha matriz de pratos,

46
00:03:10,520 --> 00:03:14,315
Eu vou pegar esse item e, em seguida, em vez

47
00:03:14,315 --> 00:03:20,510
extrair o ID do prato e, em seguida, a partir do ID do prato.

48
00:03:20,510 --> 00:03:25,880
Então, eu vou acabar construindo um novo array fora dele,

49
00:03:25,880 --> 00:03:28,420
que contém apenas os IDs,

50
00:03:28,420 --> 00:03:33,515
então uma matriz de IDs e já vemos que os IDs são string,

51
00:03:33,515 --> 00:03:37,920
que é o que eu vou retornar do meu ID prato aqui.

52
00:03:37,920 --> 00:03:41,500
É isso, o operador de matriz de mapas.

53
00:03:41,500 --> 00:03:44,800
Se você procurar operadores de matriz JavaScript,

54
00:03:44,800 --> 00:03:47,760
você verá o que o operador de matriz de mapa faz.

55
00:03:47,760 --> 00:03:50,540
Na verdade, o operador de matriz de mapa também é

56
00:03:50,540 --> 00:03:53,240
interessante da perspectiva dos observáveis,

57
00:03:53,240 --> 00:03:55,910
porque um observável como você viu,

58
00:03:55,910 --> 00:03:58,950
também pode ser visto como uma matriz,

59
00:03:58,950 --> 00:04:00,805
um fluxo de valores,

60
00:04:00,805 --> 00:04:02,330
que pode ser visto como uma matriz.

61
00:04:02,330 --> 00:04:05,560
Então, o operador de mapa também pode ser usado em observáveis.

62
00:04:05,560 --> 00:04:11,935
Mas neste momento, eu estou usando isso simplesmente como um operador de matriz JavaScript.

63
00:04:11,935 --> 00:04:13,660
Vamos salvar as alterações.

64
00:04:13,660 --> 00:04:20,815
Agora, vamos para o componente de detalhes Dish e, em seguida, atualizar o componente de detalhes Dish.

65
00:04:20,815 --> 00:04:23,129
Agora, dentro do componente de detalhe Dish,

66
00:04:23,129 --> 00:04:24,790
junto com o Dish,

67
00:04:24,790 --> 00:04:29,940
Eu vou declarar uma variável chamada DISHIDs,

68
00:04:29,940 --> 00:04:32,755
que é uma matriz de string.

69
00:04:32,755 --> 00:04:36,470
Este DISHIDs irá armazenar todos os IDs de

70
00:04:36,470 --> 00:04:42,225
todos os pratos que estão na minha coleção de pratos no meu menu.

71
00:04:42,225 --> 00:04:45,410
Então, eu também terei

72
00:04:45,640 --> 00:04:53,490
mais duas variáveis chamadas anterior e seguinte da string de tipo.

73
00:04:53,490 --> 00:04:55,215
Agora, por que eu preciso disso?

74
00:04:55,215 --> 00:04:56,980
Isso vai se tornar um pouco mais claro,

75
00:04:56,980 --> 00:04:58,790
uma vez que você implementar a visão,

76
00:04:58,790 --> 00:05:00,560
onde eu vou fazer uso disso.

77
00:05:00,560 --> 00:05:04,480
Agora, o que eu vou fazer aqui é que,

78
00:05:04,480 --> 00:05:10,610
dentro do meu NginIt anteriormente,

79
00:05:10,610 --> 00:05:18,800
nós deixamos id é igual a mais este ID de parâmetros de route.snapshot.

80
00:05:18,800 --> 00:05:22,565
Quando eu fiz isso no exercício anterior,

81
00:05:22,565 --> 00:05:28,580
Eu não expliquei a você o que o instantâneo estava fazendo e por que estamos fazendo isso dessa maneira?

82
00:05:28,580 --> 00:05:31,490
Porque você precisava entender os observáveis,

83
00:05:31,490 --> 00:05:34,060
antes de entender o significado do instantâneo.

84
00:05:34,060 --> 00:05:43,940
Agora, em Angular, o serviço de rota ativado fornece um conjunto de observáveis.

85
00:05:43,940 --> 00:05:46,775
Um dos observáveis é chamado de parâmetros.

86
00:05:46,775 --> 00:05:48,860
O que este parâmetro nos fornece,

87
00:05:48,860 --> 00:05:56,030
é uma maneira de obter os valores dos parâmetros dentro da minha URL.

88
00:05:56,030 --> 00:06:00,170
Então, você viu que quando você introduz os parâmetros de rota,

89
00:06:00,170 --> 00:06:03,605
você introduziu um dos parâmetros de rota como dois pontos ID.

90
00:06:03,605 --> 00:06:07,590
Esse ID de dois pontos fica disponível como um observável.

91
00:06:07,590 --> 00:06:10,330
Então, sempre que esse valor muda,

92
00:06:10,330 --> 00:06:15,745
, você pode observar as alterações nesse valor e, em seguida, agir de forma correspondente.

93
00:06:15,745 --> 00:06:21,010
Mas, mais cedo, quando implementamos o componente de detalhe do prato,

94
00:06:21,010 --> 00:06:22,825
nós não sabíamos sobre observáveis.

95
00:06:22,825 --> 00:06:26,200
Então, eu não conseguia explicar o que o instantâneo estava fazendo naquele momento.

96
00:06:26,200 --> 00:06:30,460
Agora, deixe-me voltar e explicar exatamente o que o instantâneo faz.

97
00:06:30,460 --> 00:06:32,870
Quando usamos isso como instantâneo aqui,

98
00:06:32,870 --> 00:06:34,250
o que estamos fazendo é,

99
00:06:34,250 --> 00:06:37,580
estamos tirando um instantâneo de

100
00:06:37,580 --> 00:06:40,250
o serviço de rota e, em seguida, estamos obtendo

101
00:06:40,250 --> 00:06:43,605
o parâmetro observável naquele ponto específico do tempo.

102
00:06:43,605 --> 00:06:46,310
O valor dos parâmetros naquele ponto específico do tempo

103
00:06:46,310 --> 00:06:49,340
e, em seguida, fazer uso dele dentro da nossa aplicação.

104
00:06:49,340 --> 00:06:51,730
Embora essa não seja a maneira ideal de fazê-lo.

105
00:06:51,730 --> 00:06:55,010
Em vez disso, então vamos fazer uso do observável

106
00:06:55,010 --> 00:06:59,990
diretamente e, em seguida, responder sempre que mudanças observáveis.

107
00:06:59,990 --> 00:07:04,650
Então, como atualizamos esse código para fazer uso do observável diretamente?

108
00:07:04,650 --> 00:07:08,030
Então, o que percebemos é que a partir do serviço de rota ativado,

109
00:07:08,030 --> 00:07:10,390
temos os parâmetros observáveis disponíveis para nós.

110
00:07:10,390 --> 00:07:13,070
Então, vamos fazer uso dos parâmetros observáveis e

111
00:07:13,070 --> 00:07:16,755
a qualquer momento há uma mudança em onde params observáveis,

112
00:07:16,755 --> 00:07:22,750
podemos iniciar uma mudança dentro do nosso componente DishDetail.

113
00:07:22,750 --> 00:07:25,820
Deixe-me ilustrar para você como vamos fazer uso de

114
00:07:25,820 --> 00:07:28,935
os parâmetros observáveis atualizando este código.

115
00:07:28,935 --> 00:07:30,735
Então, indo para este código,

116
00:07:30,735 --> 00:07:32,630
o que eu vou fazer agora,

117
00:07:32,630 --> 00:07:37,615
é que eu vou mudar isso para dizer,

118
00:07:37,615 --> 00:07:42,950
“Eu tenho essa rota e desta rota,

119
00:07:42,950 --> 00:07:45,640
Eu já tenho os parâmetros disponíveis.”

120
00:07:45,640 --> 00:07:50,030
Então, eu vou remover o instantâneo e eu uso os parâmetros.

121
00:07:50,030 --> 00:07:52,060
Então, com esses parâmetros,

122
00:07:52,060 --> 00:08:00,410
o que eu tenho agora é o acesso aos parâmetros observáveis.

123
00:08:00,410 --> 00:08:03,235
Agora, já que temos esses parábolas observáveis,

124
00:08:03,235 --> 00:08:09,545
Eu vou usar um operador neste parábolas observável e, em seguida, modificá-lo.

125
00:08:09,545 --> 00:08:17,275
Então, o operador que eu vou usar é chamado operador SwitchMap.

126
00:08:17,275 --> 00:08:21,050
O operador SwitchMap me permite

127
00:08:21,050 --> 00:08:26,230
fazer uso dos parâmetros observáveis e você vê a linha vermelha rabiscada que significa,

128
00:08:26,230 --> 00:08:31,590
que eu preciso importar o SwitchMap observável aqui.

129
00:08:31,590 --> 00:08:34,320
Então, eu vou entrar para

130
00:08:34,320 --> 00:08:39,660
minhas entradas aqui e

131
00:08:39,660 --> 00:08:45,880
então eu vou entrar rxjs e operador.

132
00:08:49,640 --> 00:08:52,710
Então, a partir dos parâmetros observáveis,

133
00:08:52,710 --> 00:08:57,740
eu recebo params que é do tipo Params.

134
00:08:57,740 --> 00:09:05,700
Então, lembre-se de que importamos os parâmetros da biblioteca do roteador aqui.

135
00:09:05,700 --> 00:09:07,520
Então, nós imploramos para os parâmetros aqui,

136
00:09:07,520 --> 00:09:12,289
da biblioteca do roteador e também importamos o serviço de rota de ativação aqui,

137
00:09:12,289 --> 00:09:15,800
e então nós os disponibilizamos dentro do nosso construtor aqui,

138
00:09:15,800 --> 00:09:18,225
através da rota do ativador.

139
00:09:18,225 --> 00:09:25,055
Então, é por isso que somos capazes de fazer esta rota params para obter os parâmetros observáveis.

140
00:09:25,055 --> 00:09:27,740
Eu vou usar o operador SwitchMap nos params

141
00:09:27,740 --> 00:09:34,049
observável e, em seguida, quando eu obter os parâmetros observáveis,

142
00:09:34,049 --> 00:09:44,880
o que eu vou fazer é pegar isso e, em seguida, dizer, este DishService.

143
00:09:45,030 --> 00:09:54,370
GetDish e, em seguida, este ID agora deve ser obtido usando os parâmetros.

144
00:09:54,370 --> 00:09:58,600
Você vê o parâmetro que temos lá.

145
00:09:58,600 --> 00:10:04,765
Dos parâmetros, eu vou dizer dentro de parênteses ID.

146
00:10:04,765 --> 00:10:11,490
Então, o que acontece é que sempre que os parâmetros observáveis mudam de valor,

147
00:10:11,490 --> 00:10:17,680
o que significa que o parâmetro de rota muda de valor, então imediatamente,

148
00:10:17,680 --> 00:10:20,900
o operador de mapa de switch tomará o valor de params,

149
00:10:20,900 --> 00:10:25,320
e, em seguida, fazer um GetDish do meu DishService.

150
00:10:25,320 --> 00:10:27,060
Então, isso seria iniciado automaticamente,

151
00:10:27,060 --> 00:10:31,280
e isso estará disponível como o outro

152
00:10:31,280 --> 00:10:36,900
observável que é emitido fazendo este operador de mapa switch neste observável.

153
00:10:36,900 --> 00:10:41,580
Então, estamos criando um novo observável que é o GetDish,

154
00:10:41,580 --> 00:10:45,820
que vai retornar o objeto prato aqui.

155
00:10:45,820 --> 00:10:49,285
Agora, uma vez que obtemos o GetDish lá,

156
00:10:49,285 --> 00:10:53,350
então que agora pode estar disponível como um observável.

157
00:10:53,350 --> 00:10:57,700
Eu só assino para que observável usando o subscrever aqui.

158
00:10:57,700 --> 00:10:59,815
Então, lá eu obtenho o prato.

159
00:10:59,815 --> 00:11:03,930
Este prato é obtido fazendo este GetDish aqui.

160
00:11:03,930 --> 00:11:08,790
Esse prato, então eu posso fazer uso para mapeá-lo em

161
00:11:08,790 --> 00:11:14,025
minha variável prato que eu declarei anteriormente.

162
00:11:14,025 --> 00:11:17,790
Então, desta forma, meu prato agora fica atualizado.

163
00:11:17,790 --> 00:11:20,775
Então, a qualquer momento que os parâmetros observáveis mudanças,

164
00:11:20,775 --> 00:11:24,210
meu prato será atualizado para o novo prato.

165
00:11:24,210 --> 00:11:27,590
Então, observe como eu estou tomando um observável, os parámetros observáveis,

166
00:11:27,590 --> 00:11:33,050
e então eu estou mapeando os parámetros observáveis em outro observável que é basicamente

167
00:11:33,050 --> 00:11:40,675
indo em buscar o valor do prato do meu DishService,

168
00:11:40,675 --> 00:11:42,955
e, em seguida, tornando isso disponível como um observável.

169
00:11:42,955 --> 00:11:48,010
Então, eu estou assinando para que observável aqui, e então,

170
00:11:48,010 --> 00:11:49,780
Eu estou recebendo o valor do prato aqui,

171
00:11:49,780 --> 00:11:52,720
e então eu estou mapeando o valor do prato ou melhor

172
00:11:52,720 --> 00:11:56,795
tornando a variável do prato igual ao valor do prato aqui.

173
00:11:56,795 --> 00:12:00,415
Observe como usando os observáveis,

174
00:12:00,415 --> 00:12:04,865
agora você é capaz de pegar um observável e, em seguida, mapeá-lo para outro observável.

175
00:12:04,865 --> 00:12:06,730
Por que isso é interessante?

176
00:12:06,730 --> 00:12:12,680
Se agora, eu tenho uma maneira de modificar esse parâmetro de rota,

177
00:12:12,680 --> 00:12:19,005
então eu serei capaz de alternar entre pratos diferentes e ver os pratos diferentes.

178
00:12:19,005 --> 00:12:22,100
Infelizmente, eu não tenho isso no lugar.

179
00:12:22,100 --> 00:12:25,735
Então, eu preciso modificar os componentes do prato para me permitir fazer isso.

180
00:12:25,735 --> 00:12:31,545
Agora, este é o lugar onde eu vou incluir alguns botões na minha visão que quando eu clicar,

181
00:12:31,545 --> 00:12:36,390
eu vou ser capaz de navegar através da minha lista de pratos.

182
00:12:36,390 --> 00:12:38,960
Agora, para poder navegar pela minha lista de pratos,

183
00:12:38,960 --> 00:12:42,005
Eu preciso saber o conjunto de todos os meus pratos,

184
00:12:42,005 --> 00:12:45,525
ou pelo menos eu preciso saber os IDs de todos os meus pratos.

185
00:12:45,525 --> 00:12:51,410
Essa é a razão pela qual eu uso este DISHIDs aqui, ok?

186
00:12:51,410 --> 00:12:58,800
Então, agora você vê por que eu incluí o método DISHIDs no meu DishService.

187
00:12:58,800 --> 00:13:01,455
Então, então eu começo.

188
00:13:01,455 --> 00:13:05,830
Eu vou primeiro obter

189
00:13:05,830 --> 00:13:10,510
os DISHIDs por

190
00:13:10,510 --> 00:13:16,970
chamando o método DishService,

191
00:13:17,070 --> 00:13:22,570
GetDishIDs nesse ponto.

192
00:13:22,570 --> 00:13:25,735
Eu ainda estou trabalhando com a velha maneira de fazer as coisas.

193
00:13:25,735 --> 00:13:34,795
Eu tenho que perceber que este GetDishIDs está enviando em observável.

194
00:13:34,795 --> 00:13:39,365
Então, eu preciso me inscrever para que observável.

195
00:13:39,365 --> 00:13:43,910
Você vê como você precisa mudar sua maneira de pensar quando

196
00:13:43,910 --> 00:13:48,340
você está operando com as variáveis aqui.

197
00:13:48,340 --> 00:13:52,840
Então, nós diríamos DISHIDs subscribe,

198
00:13:52,840 --> 00:13:54,935
e dentro do subscribe,

199
00:13:54,935 --> 00:14:00,990
vamos obter o parâmetro que é uma matriz de string,

200
00:14:00,990 --> 00:14:04,170
e então eu diria que ali mesmo,

201
00:14:04,170 --> 00:14:09,970
DISHIDs será igual a DISHIDs.

202
00:14:09,970 --> 00:14:14,085
Veja, como é fácil

203
00:14:14,085 --> 00:14:18,510
mudar sua maneira de pensar quando você quer lidar com um observável.

204
00:14:18,510 --> 00:14:20,895
Então, o GetDishIDs está enviando um observável,

205
00:14:20,895 --> 00:14:26,790
e eu estou assinando para que observável e então eu tenho os DISHIDs aqui disponíveis.

206
00:14:26,790 --> 00:14:29,130
Em seguida, também assinando o parâmetro.

207
00:14:29,130 --> 00:14:31,500
Se eu puder alterar meu parâmetro,

208
00:14:31,500 --> 00:14:35,340
valor valor de parâmetro de rota dentro do meu código,

209
00:14:35,340 --> 00:14:38,300
então eu serei capaz de navegar entre os pratos.

210
00:14:38,300 --> 00:14:41,240
Então, vamos implementar essa parte.

211
00:14:41,240 --> 00:14:43,810
Isso está ficando interessante.

212
00:14:43,810 --> 00:14:47,515
Então, para me permitir fazer isso,

213
00:14:47,515 --> 00:14:53,190
então eu vou introduzir outro método aqui chamado setPrevNext,

214
00:14:55,770 --> 00:15:03,480
e para isso, vou enviar um parâmetro dishID.

215
00:15:03,480 --> 00:15:06,295
Agora, dado o meu DisID atual,

216
00:15:06,295 --> 00:15:11,355
Eu queria ser capaz de encontrar o anterior e o próximo DisID para que eu possa implementar

217
00:15:11,355 --> 00:15:17,545
minha navegação entre os pratos dentro do meu componente dishdetail.

218
00:15:17,545 --> 00:15:22,635
Então, essa é a razão pela qual eu declarei o prev e o próximo.

219
00:15:22,635 --> 00:15:25,555
Agora, eu preciso ser capaz de inicializar esses dois valores.

220
00:15:25,555 --> 00:15:28,650
Tudo o que eu sei agora é o meu DisID atual.

221
00:15:28,650 --> 00:15:30,610
Então, usando o DisHid atual,

222
00:15:30,610 --> 00:15:34,265
Eu quero ser capaz de encontrar o anterior e o próximo DisHid.

223
00:15:34,265 --> 00:15:36,080
Então, neste método,

224
00:15:36,080 --> 00:15:40,255
Eu vou fazer o anterior e o próximo DisID.

225
00:15:40,255 --> 00:15:42,160
Então, aqui vou dizer,

226
00:15:42,160 --> 00:15:50,200
deixe índice igual a este DISHIDs.

227
00:15:50,200 --> 00:15:52,900
Agora, eu sei apenas o ID do meu prato,

228
00:15:52,900 --> 00:15:55,360
mas o ID do meu prato não me dá tudo.

229
00:15:55,360 --> 00:16:00,980
Eu preciso ser capaz de encontrar o prato nesta matriz de IDs,

230
00:16:00,980 --> 00:16:06,510
então é por isso que eu estou dizendo isso DISHIDs, e indexOf.

231
00:16:06,510 --> 00:16:13,640
Você deve conhecer o operador IndexOf em uma matriz JavaScript.

232
00:16:13,640 --> 00:16:20,935
O operador indexOf obtém um valor e, em seguida, localiza o índice desse valor na matriz.

233
00:16:20,935 --> 00:16:27,605
Então, indexOf e o parâmetro aqui,

234
00:16:27,605 --> 00:16:29,945
vou dar é o DisHID,

235
00:16:29,945 --> 00:16:34,765
o DisHID que obterei em pouco tempo.

236
00:16:34,765 --> 00:16:38,765
Agora, uma vez que eu obter o índice deste valor atual,

237
00:16:38,765 --> 00:16:42,385
eu posso então mapear

238
00:16:42,385 --> 00:16:49,420
os dois DISHIDs anteriores.

239
00:16:49,420 --> 00:16:59,080
Então, este é o lugar onde eu

240
00:16:59,080 --> 00:17:08,980
vai fazer um pouco de código complicado aqui que me permitirá enrolar quando eu estiver.

241
00:17:08,980 --> 00:17:15,030
Então, observe que esta matriz DISHIDs contém um certo número de valores lá.

242
00:17:15,030 --> 00:17:20,270
Se meu valor atual do meu DisID for o primeiro item,

243
00:17:20,270 --> 00:17:24,565
então o valor anterior será o item indexado zero na minha matriz.

244
00:17:24,565 --> 00:17:26,590
Mas se meu valor atual é o item zero,

245
00:17:26,590 --> 00:17:28,235
o primeiro item na minha matriz,

246
00:17:28,235 --> 00:17:32,530
então eu quero enrolar para obter o último item na minha matriz.

247
00:17:32,530 --> 00:17:36,770
Então, este é o lugar onde eu faço uso do operador módulo com

248
00:17:36,770 --> 00:17:42,235
alguma maneira matemática de embrulhar as coisas ao redor.

249
00:17:42,235 --> 00:17:44,275
Então, eu diria que este DisHid

250
00:17:44,275 --> 00:18:14,500
mais índice menos um, e modulo este comprimento DISHIDS.

251
00:18:14,500 --> 00:18:15,925
Então, o que eu estou fazendo é,

252
00:18:15,925 --> 00:18:19,590
o valor anterior será o índice atual,

253
00:18:19,590 --> 00:18:21,735
índice do valor atual,

254
00:18:21,735 --> 00:18:25,935
mais o comprimento dos pratos menos um.

255
00:18:25,935 --> 00:18:27,815
Agora, se o índice for um,

256
00:18:27,815 --> 00:18:29,585
index menos um me dará zero.

257
00:18:29,585 --> 00:18:30,680
Se o índice for zero,

258
00:18:30,680 --> 00:18:32,670
índice menos um me dará menos um,

259
00:18:32,670 --> 00:18:34,210
mas não é isso que eu quero.

260
00:18:34,210 --> 00:18:38,190
Eu quero enrolar e obter o comprimento DishID menos um.

261
00:18:38,190 --> 00:18:41,870
Então, é por isso que eu estou incluindo isso lá,

262
00:18:41,870 --> 00:18:44,995
e, em seguida, fazendo um módulo com os DISHIDs.

263
00:18:44,995 --> 00:18:47,660
Então, quando o índice é zero,

264
00:18:47,660 --> 00:18:51,915
eu vou enrolar para obter o último item na minha matriz.

265
00:18:51,915 --> 00:18:56,965
Então, é assim que eu inicializar o valor anterior.

266
00:18:56,965 --> 00:18:59,120
Então, o próximo valor,

267
00:18:59,120 --> 00:19:02,700
Vou usar a mesma abordagem,

268
00:19:02,770 --> 00:19:08,205
mas envolva dizendo índice mais um.

269
00:19:08,205 --> 00:19:11,780
Então, se eu estou atualmente no último item na matriz,

270
00:19:11,780 --> 00:19:14,200
então eu quero envolver em torno de zero.

271
00:19:14,200 --> 00:19:16,715
Então, essa é a outra parte do que estou fazendo.

272
00:19:16,715 --> 00:19:19,200
Então, lá, eu estou definindo o anterior e o próximo.

273
00:19:19,200 --> 00:19:21,795
Então, quando devo definir o anterior e o próximo?

274
00:19:21,795 --> 00:19:23,965
Sempre que meu prato mudar,

275
00:19:23,965 --> 00:19:27,630
Eu preciso ser capaz de iniciar uma chamada para isso.

276
00:19:27,630 --> 00:19:30,590
Agora, onde estou mudando o valor do meu prato?

277
00:19:30,590 --> 00:19:34,365
Olhando para trás para a assinatura aqui,

278
00:19:34,365 --> 00:19:35,905
notar que ali mesmo,

279
00:19:35,905 --> 00:19:40,180
você está mudando seu prato cada vez que o nosso parâmetro muda.

280
00:19:40,180 --> 00:19:42,035
Então, nesse ponto,

281
00:19:42,035 --> 00:19:45,495
Eu quero redefinir meu valor anterior e seguinte.

282
00:19:45,495 --> 00:19:51,940
Então, eu vou mudar isso em um bloco de código aqui.

283
00:19:51,940 --> 00:19:57,250
Então, eu diria que este setPrevNext,

284
00:19:57,250 --> 00:20:02,170
e, em seguida, o parâmetro seria DishID.

285
00:20:04,370 --> 00:20:07,970
É isso. Então, com esta mudança,

286
00:20:07,970 --> 00:20:11,155
o que acontece é cada vez que meu prato é atualizado,

287
00:20:11,155 --> 00:20:17,085
Eu vou atualizar o anterior e o próximo também correspondentemente a partir daqui.

288
00:20:17,085 --> 00:20:19,605
Então, com esta pequena mudança,

289
00:20:19,605 --> 00:20:23,150
meu DisHid será o prato atual.

290
00:20:23,150 --> 00:20:25,530
O anterior estará apontando para o prato anterior,

291
00:20:25,530 --> 00:20:28,690
e o próximo será apontado para o próximo DisID.

292
00:20:28,690 --> 00:20:31,565
Então, eu tenho todos os três que eu preciso.

293
00:20:31,565 --> 00:20:37,460
Agora, eu posso fazer uso desses três valores, a fim de implementar a maneira de navegar

294
00:20:37,460 --> 00:20:43,325
entre os pratos no meu modelo, incluindo um par de botões no meu modelo.

295
00:20:43,325 --> 00:20:48,775
Então, vamos para o modelo de componentes dishdetail,

296
00:20:48,775 --> 00:20:53,569
e, em seguida, incluir alguns botões que me permitem navegar entre os pratos.

297
00:20:53,569 --> 00:20:58,535
Indo para o componente Dish Detail enquanto eu estiver aqui,

298
00:20:58,535 --> 00:21:06,150
deixe-me pegar este nGif deste cartão e depois movê-lo para o div lá em cima.

299
00:21:06,150 --> 00:21:08,445
Eu quero esconder todo o div,

300
00:21:08,445 --> 00:21:10,850
quando meu prato não está atualmente defeito,

301
00:21:10,850 --> 00:21:13,515
da mesma forma para os comentários também.

302
00:21:13,515 --> 00:21:16,440
Acho que isso é um pouco chocante

303
00:21:16,440 --> 00:21:19,700
quando minha informação do prato está sendo obtida do servidor.

304
00:21:19,700 --> 00:21:24,945
Então, eu vou fazer essa mudança para ambos os dois divs que

305
00:21:24,945 --> 00:21:32,810
um mostrando os comentários e o outro mostrando os detalhes do prato no cartão.

306
00:21:32,810 --> 00:21:35,170
Com essas duas atualizações,

307
00:21:35,170 --> 00:21:37,210
dentro de minhas ações de cartão,

308
00:21:37,210 --> 00:21:38,605
Eu vou incluir

309
00:21:38,605 --> 00:21:49,165
mais um botão do tipo de botão obviamente e este botão,

310
00:21:49,165 --> 00:21:55,165
Vou incluir o RouterLink.

311
00:21:55,165 --> 00:21:57,320
No momento em que você vê o link do roteador,

312
00:21:57,320 --> 00:21:58,775
você imediatamente diz, “Oh,

313
00:21:58,775 --> 00:22:00,620
Eu sei o que você está tentando fazer.

314
00:22:00,620 --> 00:22:04,890
Você está tentando converter este botão para poder navegar entre

315
00:22:04,890 --> 00:22:11,720
os diferentes componentes dentro do meu serviço.”

316
00:22:11,720 --> 00:22:14,000
Então, para o RouterLink,

317
00:22:14,000 --> 00:22:22,870
Eu vou fornecer uma matriz de valores e a matriz de valores para o RouterLink,

318
00:22:22,870 --> 00:22:27,135
Eu vou fazer dishdetail.

319
00:22:27,135 --> 00:22:30,665
Além disso, a segunda parte.

320
00:22:30,665 --> 00:22:33,330
Veja, esta é a parte interessante.

321
00:22:33,330 --> 00:22:37,125
A segunda parte desta matriz será prev,

322
00:22:37,125 --> 00:22:43,090
que é a variável que eu declarei no meu componente.

323
00:22:43,090 --> 00:22:52,905
Então, com isso, este botão se tornará um link para o prato anterior na minha lista de pratos.

324
00:22:52,905 --> 00:22:55,615
Spiffy, certo?

325
00:22:55,615 --> 00:23:01,010
Então, com isso, o que mais?

326
00:23:02,010 --> 00:23:07,550
Deixe-me fechar o botão aqui e, em seguida, dentro do botão,

327
00:23:07,550 --> 00:23:16,890
Eu vou usar uma fonte impressionante ícone

328
00:23:22,360 --> 00:23:26,550
fa chevron-left.

329
00:23:32,670 --> 00:23:37,935
Então, é isso. Este botão será um botão com um ícone lá.

330
00:23:37,935 --> 00:23:40,605
Então, agora temos um botão aqui,

331
00:23:40,605 --> 00:23:43,465
Eu também vou incluir outro botão aqui.

332
00:23:43,465 --> 00:23:44,880
Antes de incluir o botão,

333
00:23:44,880 --> 00:23:50,330
Eu vou fazer span classe flex-spacer,

334
00:23:50,330 --> 00:23:55,210
você me viu usando o flex-spacer em um dos exercícios anteriores.

335
00:23:55,210 --> 00:23:56,855
Então, você vê o que eu estou fazendo,

336
00:23:56,855 --> 00:24:00,695
Estou esticando para incluir o segundo botão.

337
00:24:00,695 --> 00:24:02,270
Então, para o segundo botão,

338
00:24:02,270 --> 00:24:05,040
Eu só vou copiar este

339
00:24:06,780 --> 00:24:13,190
e, em seguida, colá-lo lá e, em seguida, atualizar este para dizer prev.

340
00:24:13,190 --> 00:24:16,730
Em vez de anterior, vou seguir e depois

341
00:24:16,730 --> 00:24:23,335
fa-chevron-esquerda para fa-chevron-direita, e é isso.

342
00:24:23,335 --> 00:24:28,049
Vamos salvar as alterações nos nossos Dish Detail Components,

343
00:24:28,049 --> 00:24:30,760
e também nos arquivos restantes.

344
00:24:30,760 --> 00:24:35,340
Após esta atualização, vamos verificar o que nosso aplicativo faz.

345
00:24:35,340 --> 00:24:38,065
Indo para o meu aplicativo no navegador,

346
00:24:38,065 --> 00:24:40,500
vamos para o componente Menu.

347
00:24:40,500 --> 00:24:46,240
Vemos o Menu e vamos selecionar um item do Menu aqui.

348
00:24:46,240 --> 00:24:53,270
Então, observe que agora este item do prato do menu é exibido aqui.

349
00:24:53,270 --> 00:24:55,225
Aviso na parte inferior,

350
00:24:55,225 --> 00:24:58,835
temos dois botões aqui, esquerda e direita.

351
00:24:58,835 --> 00:25:01,440
Quando clicamos no botão esquerdo,

352
00:25:01,440 --> 00:25:08,875
note como somos capazes de passar para o prato anterior na lista de pratos.

353
00:25:08,875 --> 00:25:15,515
Eu posso continuar fazendo esquerda novamente e continuar navegando para a esquerda e para a direita.

354
00:25:15,515 --> 00:25:17,980
Observe que quando eu faço isso,

355
00:25:17,980 --> 00:25:22,655
minha visão real não está sendo recarregada,

356
00:25:22,655 --> 00:25:25,190
em vez disso eu só vou buscar

357
00:25:25,190 --> 00:25:34,955
os dados relacionados com pratos do serviço e, em seguida, atualizar minha visão aqui.

358
00:25:34,955 --> 00:25:38,350
A razão pela qual somos capazes de fazer isso é porque nós

359
00:25:38,350 --> 00:25:43,445
temos o observável, os parâmetros observáveis.

360
00:25:43,445 --> 00:25:45,890
Então, sempre que eu clicar nesses dois,

361
00:25:45,890 --> 00:25:48,860
esquerda e direita, os parâmetros observáveis,

362
00:25:48,860 --> 00:25:56,620
observe como neste momento o endereço mostra o dishdetail zero.

363
00:25:56,620 --> 00:25:58,315
Se eu clicar à direita,

364
00:25:58,315 --> 00:26:02,925
então que será atualizado de dishdetail zero para dishdetail um.

365
00:26:02,925 --> 00:26:07,560
Essa mudança de parâmetro, e isso fará com que o meu observável para

366
00:26:07,560 --> 00:26:12,245
ir e buscar o novo prato do serviço de prato.

367
00:26:12,245 --> 00:26:14,980
Então, o novo prato é buscado,

368
00:26:14,980 --> 00:26:20,285
a variável prato no meu componente é atualizado,

369
00:26:20,285 --> 00:26:21,885
e quando isso é atualizado,

370
00:26:21,885 --> 00:26:23,640
minha visão também é atualizado.

371
00:26:23,640 --> 00:26:28,185
Então, note que eu estou usando a mesma vista,

372
00:26:28,185 --> 00:26:36,440
Eu sou capaz de navegar entre os vários pratos que fazem parte da minha lista de pratos.

373
00:26:36,440 --> 00:26:42,470
Esta é a parte interessante que você pode obter usando o params

374
00:26:42,470 --> 00:26:49,250
observável a partir do activator.service dentro do seu aplicativo Angular.

375
00:26:49,250 --> 00:26:56,355
Interessante maneira de fazer uso de notas observáveis nossa aplicação Angular.

376
00:26:56,355 --> 00:26:59,640
Claro, a maneira como eu implementei isso,

377
00:26:59,640 --> 00:27:03,210
Eu fiz isso um pouco de uma maneira inventada de fazer as coisas.

378
00:27:03,210 --> 00:27:07,965
Eu tinha que se apossar da lista de IDs de prato.

379
00:27:07,965 --> 00:27:12,760
Eu tive que modificar o anterior e o próximo e assim por diante.

380
00:27:12,760 --> 00:27:16,360
Se você tivesse uma maneira de obter o

381
00:27:16,360 --> 00:27:20,000
anterior e o próximo valor automaticamente do seu serviço,

382
00:27:20,000 --> 00:27:22,015
sempre que você buscar um prato,

383
00:27:22,015 --> 00:27:26,895
então a implementação da pontuação se tornará um pouco mais fácil.

384
00:27:26,895 --> 00:27:28,705
Agora não temos isso.

385
00:27:28,705 --> 00:27:33,430
Então, eu trabalhei em torno do problema porque eu só queria ilustrar a maneira

386
00:27:33,430 --> 00:27:38,855
de usar um observável como este dentro de seu aplicativo Angular.

387
00:27:38,855 --> 00:27:43,270
Se pudermos implementar o serviço que retornará o

388
00:27:43,270 --> 00:27:47,320
anterior e o próximo valor sempre que buscarmos um prato,

389
00:27:47,320 --> 00:27:53,640
então toda essa dor de cabeça será muito mais simplesmente resolvida.

390
00:27:53,640 --> 00:27:58,810
Vamos adiar essa ideia para uma fase posterior.

391
00:27:58,810 --> 00:28:01,930
Mas no momento, você vê como estamos fazendo

392
00:28:01,930 --> 00:28:05,250
uso dos parâmetros observáveis, a fim de implementar

393
00:28:05,250 --> 00:28:12,605
uma maneira interessante de apoiar um novo recurso dentro da nossa aplicação Angular.

394
00:28:12,605 --> 00:28:16,325
Isso conclui este exercício.

395
00:28:16,325 --> 00:28:24,000
Este é um bom momento para você fazer um commit git com a mensagem RXJS Parte dois.