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

2
00:00:04,740 --> 00:00:09,772
Usando o Roteador Angular, já aprendemos como podemos navegar

3
00:00:09,772 --> 00:00:15,673
de uma vista para outra visualização usando a diretiva de link do roteador para especificar o link.

4
00:00:15,673 --> 00:00:21,823
E também o módulo roteador, permitindo-nos com a especificação do caminho,

5
00:00:21,823 --> 00:00:26,715
para navegar para as vistas dos diferentes componentes.

6
00:00:26,715 --> 00:00:31,265
Agora, vamos dar um exemplo do componente dishdetail.

7
00:00:31,265 --> 00:00:36,680
Até agora, o componente dishdetail tem funcionado ao receber os detalhes

8
00:00:36,680 --> 00:00:42,270
do prato específico que ele precisa exibir no componente menu.

9
00:00:42,270 --> 00:00:47,211
Mas isso foi facilitado porque o componente dishdetail tinha uma propriedade

10
00:00:47,211 --> 00:00:49,290
que estava enviando o valor.

11
00:00:49,290 --> 00:00:52,201
E então estávamos usando o decorador de entrada para

12
00:00:52,201 --> 00:00:57,027
a variável dentro do componente dishdetail para obter o valor que

13
00:00:57,027 --> 00:01:00,800
estava sendo passado no componente de menu.

14
00:01:00,800 --> 00:01:06,120
Agora, quando você tem esses componentes sendo roteados para usar um roteador,

15
00:01:06,120 --> 00:01:10,440
essa conexão entre os componentes não existe mais.

16
00:01:10,440 --> 00:01:13,995
Portanto, precisamos aproveitar o Roteador Angular para poder passar informações

17
00:01:13,995 --> 00:01:17,560
de um componente para o outro componente.

18
00:01:17,560 --> 00:01:22,140
E isso geralmente é feito sob a forma de parâmetros.

19
00:01:22,140 --> 00:01:25,940
Parâmetros que podem ser especificados como parâmetros de rota,

20
00:01:25,940 --> 00:01:29,600
como vamos aprender um pouco mais tarde, ou parâmetros de consulta.

21
00:01:31,480 --> 00:01:34,320
Então, para o Roteador Angular, o que aprendemos até

22
00:01:34,320 --> 00:01:38,890
agora é que os caminhos são todos especificados como um URL.

23
00:01:38,890 --> 00:01:43,532
Suponha que você tenha a necessidade de passar um valor de parâmetro de um componente para

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

25
00:01:44,980 --> 00:01:46,820
Então como fazemos isso?

26
00:01:46,820 --> 00:01:50,550
Agora, a única maneira de se comunicar entre os componentes

27
00:01:50,550 --> 00:01:52,125
é usando o link do roteador.

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

29
00:01:54,570 --> 00:01:58,820
usam o módulo do roteador para fazer a navegação de um componente para outro componente.

30
00:01:58,820 --> 00:02:06,370
Agora, é aqui que a capacidade de especificar valores de parâmetro dentro da URL para

31
00:02:06,370 --> 00:02:12,070
um componente, o caminho para um componente, nos permite passar essas informações.

32
00:02:12,070 --> 00:02:16,690
Assim, por exemplo, se queremos ser capazes de exibir um prato

33
00:02:16,690 --> 00:02:20,450
com um id 42 no componente dishdetail.

34
00:02:20,450 --> 00:02:25,680
Se tivéssemos a capacidade de especificar algo como /dishdetail/42.

35
00:02:25,680 --> 00:02:31,780
E então deixe o dishdetail pegar o número 42 do URL diretamente.

36
00:02:31,780 --> 00:02:37,000
Então temos facilitado um mecanismo para transmitir esta informação

37
00:02:37,000 --> 00:02:42,710
um componente para outro componente quando estamos navegando para o outro componente.

38
00:02:42,710 --> 00:02:47,389
Isto é o que no módulo Roteador Angular é referido como um parâmetro de rota.

39
00:02:48,560 --> 00:02:50,400
Como funciona um parâmetro de rota?

40
00:02:50,400 --> 00:02:54,410
Então, quando você especifica um parâmetro de rota na definição de caminho,

41
00:02:54,410 --> 00:02:57,260
esse parâmetro de rota é especificado usando um token.

42
00:02:57,260 --> 00:03:02,300
Então, quando você especifica o caminho na especificação de caminho para

43
00:03:02,300 --> 00:03:05,600
as rotas, você especificaria um caminho como este.

44
00:03:05,600 --> 00:03:09,952
Então você diria, dishdetail/:id.

45
00:03:09,952 --> 00:03:14,750
Então, onde id se torna o token que transporta o parâmetro route

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

47
00:03:18,359 --> 00:03:21,200
O componente dishdetail neste exemplo.

48
00:03:21,200 --> 00:03:25,002
Assim, você pode especificar um parâmetro de rota no caminho.

49
00:03:25,002 --> 00:03:30,098
E, em seguida, de outro local, você pode passar o parâmetro

50
00:03:30,098 --> 00:03:34,810
para o componente específico que precisa desse parâmetro.

51
00:03:34,810 --> 00:03:37,240
O componente dishdetail neste exemplo.

52
00:03:38,810 --> 00:03:42,510
Agora, a próxima questão importante que irá surgir em sua mente é,

53
00:03:42,510 --> 00:03:44,610
como passamos este parâmetro de rota?

54
00:03:44,610 --> 00:03:50,134
Agora, quando você vai pensar sobre isso, quando você navegar pelo componente dishdetail.

55
00:03:50,134 --> 00:03:55,255
Você está vindo de outro componente clicando em um link ou usando

56
00:03:55,255 --> 00:04:01,020
algo chamado função de navegação como o módulo de rota fornece para nós.

57
00:04:01,020 --> 00:04:06,240
Vamos analisar as duas formas de navegar para um componente específico.

58
00:04:06,240 --> 00:04:11,222
Agora, se você precisar especificar o parâmetro de rota, quando você especificar o link,

59
00:04:11,222 --> 00:04:16,070
recorda que estávamos especificando o link usando a diretiva

60
00:04:16,070 --> 00:04:20,750
link roteador em nossos arquivos de modelo.

61
00:04:20,750 --> 00:04:23,470
Agora, se você estiver indo para especificar isso nos arquivos de modelo,

62
00:04:23,470 --> 00:04:29,040
então o link do roteador também leva em uma matriz como vemos.

63
00:04:29,040 --> 00:04:31,500
Uma matriz de parâmetros de link,

64
00:04:31,500 --> 00:04:35,170
onde você pode especificar explicitamente o parâmetro que está sendo transmitido.

65
00:04:35,170 --> 00:04:40,480
Então, por exemplo, neste exemplo que você vê aqui, estamos especificando a.

66
00:04:40,480 --> 00:04:42,850
E então você está fazendo um NGFor.

67
00:04:42,850 --> 00:04:47,723
Então você está looping através de um conjunto de objetos JavaScript em

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

69
00:04:50,720 --> 00:04:52,860
Em seguida, quando você especificar o link do roteador.

70
00:04:52,860 --> 00:04:55,770
Então, dentro daí, você pode especificar o link do roteador.

71
00:04:55,770 --> 00:04:58,260
Mas agora, cercado por colchetes.

72
00:04:58,260 --> 00:05:05,150
E isso levará em um valor como este tem uma matriz de parâmetros de link.

73
00:05:05,150 --> 00:05:08,768
Então aqui, você pode especificar diferentes partes do parâmetro link.

74
00:05:08,768 --> 00:05:15,370
E Angular Router irá juntá-los para formar a URL real.

75
00:05:15,370 --> 00:05:19,300
Então aqui, você pode ver que a primeira parte do parâmetro link é especificada

76
00:05:19,300 --> 00:05:23,640
como uma string aqui, então /dishdetail aqui.

77
00:05:23,640 --> 00:05:28,970
Mas a segunda parte é especificada como um valor que está sendo obtido

78
00:05:28,970 --> 00:05:30,070
do prato.

79
00:05:31,130 --> 00:05:38,710
Qual é o prato, o objeto JavaScript da matriz de objetos JavaScript aqui.

80
00:05:38,710 --> 00:05:41,204
Então, cada prato carregará um dish.id.

81
00:05:41,204 --> 00:05:44,090
Assim, o dish.id pode ser especificado como

82
00:05:44,090 --> 00:05:47,640
um dos valores dentro desta matriz de parâmetros de link aqui.

83
00:05:47,640 --> 00:05:52,170
Então, quando você clicar neste, para o prato específico,

84
00:05:52,170 --> 00:05:57,130
este dish.id será substituído pelo id específico para o prato.

85
00:05:57,130 --> 00:06:01,890
Assim, por exemplo, se o id for 42, então isso será substituído por 42.

86
00:06:01,890 --> 00:06:06,779
Então, quando o Roteador Angular recebe esse link de roteador,

87
00:06:06,779 --> 00:06:11,783
então ele construirá o URL como /dishdetail/42.

88
00:06:11,783 --> 00:06:17,010
O 42 sendo o valor do dish.id neste momento.

89
00:06:17,010 --> 00:06:19,630
Então é assim que você pode passar no parâmetro.

90
00:06:19,630 --> 00:06:21,500
A segunda parte da pergunta, é claro,

91
00:06:21,500 --> 00:06:27,790
é como o componente recupera esse valor do parâmetro link?

92
00:06:27,790 --> 00:06:30,130
Sobre o qual falaremos no próximo slide.

93
00:06:31,320 --> 00:06:36,380
Outra maneira que você pode fazer com que essa navegação para o outro componente

94
00:06:36,380 --> 00:06:42,380
também é usar um método chamado navigation que é fornecido pelo módulo do roteador.

95
00:06:42,380 --> 00:06:44,740
Então você pode dizer, this.router.navigate.

96
00:06:44,740 --> 00:06:47,888
Assim, isso pode ser incluído em seu código TypeScript ou

97
00:06:47,888 --> 00:06:53,250
seu código JavaScript para causar automaticamente a navegação para o outro.

98
00:06:53,250 --> 00:06:58,337
Então isso pode ser incluído dentro de um método que você

99
00:06:58,337 --> 00:07:03,432
incluir no código TypeScript do seu componente.

100
00:07:03,432 --> 00:07:08,575
E isso pode ser invocado a partir do seu modelo.

101
00:07:08,575 --> 00:07:11,921
Diga, por exemplo, clicando em um link lá.

102
00:07:11,921 --> 00:07:17,097
Então, dentro do código, você pode incluir uma instrução como esta,

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

104
00:07:19,582 --> 00:07:24,152
E esse método de navegação leva a mesma matriz de parâmetros de link

105
00:07:24,152 --> 00:07:27,466
que o valor do parâmetro.

106
00:07:27,466 --> 00:07:33,056
Assim, isso também permitirá que essas informações sejam fornecidas ao Roteador Angular para

107
00:07:33,056 --> 00:07:37,186
que ele possa navegar para o outro componente.

108
00:07:37,186 --> 00:07:43,246
Agora, vamos para o outro lado desta equação.

109
00:07:43,246 --> 00:07:50,466
Como um componente, como o componente dishdetail neste exemplo,

110
00:07:50,466 --> 00:07:57,821
recupera esse valor especificado como o token no link URL?

111
00:07:57,821 --> 00:08:02,789
Agora, é aqui que a biblioteca Roteador Angular fornece

112
00:08:02,789 --> 00:08:07,940
um serviço chamado como o serviço ActivatedRoute.

113
00:08:07,940 --> 00:08:12,913
Este serviço ActivatedRoute pode ser aproveitado para poder recuperar

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

115
00:08:14,360 --> 00:08:18,556
Agora, em particular, para facilitar essa recuperação de parâmetros,

116
00:08:18,556 --> 00:08:22,689
o serviço ActivatedRoute fornece três coisas diferentes.

117
00:08:22,689 --> 00:08:29,140
Por exemplo, ele fornece esse método para recuperar o URL.

118
00:08:29,140 --> 00:08:32,198
Que é um observável do caminho da rota.

119
00:08:32,198 --> 00:08:37,085
que é representado como uma matriz de strings para cada caminho de rota.

120
00:08:37,085 --> 00:08:39,271
Você encontrou esta palavra observável aqui.

121
00:08:39,271 --> 00:08:41,770
No momento, segure essa palavra.

122
00:08:41,770 --> 00:08:46,250
Vamos voltar, veja o que é um observável no próximo módulo.

123
00:08:46,250 --> 00:08:49,190
Mas no momento, o que percebemos é que este serviço

124
00:08:49,190 --> 00:08:52,430
ActivatedRoute fornece isso observável.

125
00:08:53,970 --> 00:08:58,920
Da mesma forma, o serviço ActivatedRoute também fornece outro observável chamado params.

126
00:08:58,920 --> 00:09:03,920
Este parâmetro observável disponibiliza para um componente

127
00:09:03,920 --> 00:09:07,990
os valores de parâmetro que estão sendo passados como o parâmetro route.

128
00:09:07,990 --> 00:09:12,260
Então este parâmetro observável é aquele que vamos usar

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

130
00:09:15,740 --> 00:09:18,290
Você verá o método exato de fazer isso

131
00:09:18,290 --> 00:09:21,860
no exercício que segue esta palestra.

132
00:09:21,860 --> 00:09:29,740
Da mesma forma, você também pode passar parâmetros de consulta para outro componente.

133
00:09:29,740 --> 00:09:33,185
Agora, não vamos lidar com um exemplo dos parâmetros de consulta agora.

134
00:09:33,185 --> 00:09:39,480
Mas, mais tarde, podemos encontrar um exemplo de como você pode passar na consulta

135
00:09:39,480 --> 00:09:46,010
parâmetros através do serviço ActivatedRoute para outro componente.

136
00:09:46,010 --> 00:09:50,870
Com este entendimento, vamos avançar para o próximo exercício.

137
00:09:50,870 --> 00:09:54,790
Continuaremos a desenvolver o aplicativo de página única.

138
00:09:54,790 --> 00:09:59,517
E então ative o uso de um parâmetro de rota para passar em

139
00:09:59,517 --> 00:10:03,605
o id de um prato para o componente dishdetail.

140
00:10:03,605 --> 00:10:09,990
Para que o componente dishdetail, por sua vez, possa usar este id para consultar o serviço de prato.

141
00:10:09,990 --> 00:10:14,280
Para obter os detalhes desse prato específico que é

142
00:10:14,280 --> 00:10:17,406
suposto exibir dentro de sua visão.

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