[MUSIC]
Usando o Roteador Angular, já aprendemos como podemos navegar
de uma vista para outra visualização usando a diretiva de link do roteador para especificar o link.
E também o módulo roteador, permitindo-nos com a especificação do caminho,
para navegar para as vistas dos diferentes componentes.
Agora, vamos dar um exemplo do componente dishdetail.
Até agora, o componente dishdetail tem funcionado ao receber os detalhes
do prato específico que ele precisa exibir no componente menu.
Mas isso foi facilitado porque o componente dishdetail tinha uma propriedade
que estava enviando o valor.
E então estávamos usando o decorador de entrada para
a variável dentro do componente dishdetail para obter o valor que
estava sendo passado no componente de menu.
Agora, quando você tem esses componentes sendo roteados para usar um roteador,
essa conexão entre os componentes não existe mais.
Portanto, precisamos aproveitar o Roteador Angular para poder passar informações
de um componente para o outro componente.
E isso geralmente é feito sob a forma de parâmetros.
Parâmetros que podem ser especificados como parâmetros de rota,
como vamos aprender um pouco mais tarde, ou parâmetros de consulta.
Então, para o Roteador Angular, o que aprendemos até
agora é que os caminhos são todos especificados como um URL.
Suponha que você tenha a necessidade de passar um valor de parâmetro de um componente para
outro componente.
Então como fazemos isso?
Agora, a única maneira de se comunicar entre os componentes
é usando o link do roteador.
e/ou para
usam o módulo do roteador para fazer a navegação de um componente para outro componente.
Agora, é aqui que a capacidade de especificar valores de parâmetro dentro da URL para
um componente, o caminho para um componente, nos permite passar essas informações.
Assim, por exemplo, se queremos ser capazes de exibir um prato
com um id 42 no componente dishdetail.
Se tivéssemos a capacidade de especificar algo como /dishdetail/42.
E então deixe o dishdetail pegar o número 42 do URL diretamente.
Então temos facilitado um mecanismo para transmitir esta informação
um componente para outro componente quando estamos navegando para o outro componente.
Isto é o que no módulo Roteador Angular é referido como um parâmetro de rota.
Como funciona um parâmetro de rota?
Então, quando você especifica um parâmetro de rota na definição de caminho,
esse parâmetro de rota é especificado usando um token.
Então, quando você especifica o caminho na especificação de caminho para
as rotas, você especificaria um caminho como este.
Então você diria, dishdetail/:id.
Então, onde id se torna o token que transporta o parâmetro route
para o componente específico.
O componente dishdetail neste exemplo.
Assim, você pode especificar um parâmetro de rota no caminho.
E, em seguida, de outro local, você pode passar o parâmetro
para o componente específico que precisa desse parâmetro.
O componente dishdetail neste exemplo.
Agora, a próxima questão importante que irá surgir em sua mente é,
como passamos este parâmetro de rota?
Agora, quando você vai pensar sobre isso, quando você navegar pelo componente dishdetail.
Você está vindo de outro componente clicando em um link ou usando
algo chamado função de navegação como o módulo de rota fornece para nós.
Vamos analisar as duas formas de navegar para um componente específico.
Agora, se você precisar especificar o parâmetro de rota, quando você especificar o link,
recorda que estávamos especificando o link usando a diretiva
link roteador em nossos arquivos de modelo.
Agora, se você estiver indo para especificar isso nos arquivos de modelo,
então o link do roteador também leva em uma matriz como vemos.
Uma matriz de parâmetros de link,
onde você pode especificar explicitamente o parâmetro que está sendo transmitido.
Então, por exemplo, neste exemplo que você vê aqui, estamos especificando a.
E então você está fazendo um NGFor.
Então você está looping através de um conjunto de objetos JavaScript em
uma matriz de objetos JavaScript.
Em seguida, quando você especificar o link do roteador.
Então, dentro daí, você pode especificar o link do roteador.
Mas agora, cercado por colchetes.
E isso levará em um valor como este tem uma matriz de parâmetros de link.
Então aqui, você pode especificar diferentes partes do parâmetro link.
E Angular Router irá juntá-los para formar a URL real.
Então aqui, você pode ver que a primeira parte do parâmetro link é especificada
como uma string aqui, então /dishdetail aqui.
Mas a segunda parte é especificada como um valor que está sendo obtido
do prato.
Qual é o prato, o objeto JavaScript da matriz de objetos JavaScript aqui.
Então, cada prato carregará um dish.id.
Assim, o dish.id pode ser especificado como
um dos valores dentro desta matriz de parâmetros de link aqui.
Então, quando você clicar neste, para o prato específico,
este dish.id será substituído pelo id específico para o prato.
Assim, por exemplo, se o id for 42, então isso será substituído por 42.
Então, quando o Roteador Angular recebe esse link de roteador,
então ele construirá o URL como /dishdetail/42.
O 42 sendo o valor do dish.id neste momento.
Então é assim que você pode passar no parâmetro.
A segunda parte da pergunta, é claro,
é como o componente recupera esse valor do parâmetro link?
Sobre o qual falaremos no próximo slide.
Outra maneira que você pode fazer com que essa navegação para o outro componente
também é usar um método chamado navigation que é fornecido pelo módulo do roteador.
Então você pode dizer, this.router.navigate.
Assim, isso pode ser incluído em seu código TypeScript ou
seu código JavaScript para causar automaticamente a navegação para o outro.
Então isso pode ser incluído dentro de um método que você
incluir no código TypeScript do seu componente.
E isso pode ser invocado a partir do seu modelo.
Diga, por exemplo, clicando em um link lá.
Então, dentro do código, você pode incluir uma instrução como esta,
this.router.navigate.
E esse método de navegação leva a mesma matriz de parâmetros de link
que o valor do parâmetro.
Assim, isso também permitirá que essas informações sejam fornecidas ao Roteador Angular para
que ele possa navegar para o outro componente.
Agora, vamos para o outro lado desta equação.
Como um componente, como o componente dishdetail neste exemplo,
recupera esse valor especificado como o token no link URL?
Agora, é aqui que a biblioteca Roteador Angular fornece
um serviço chamado como o serviço ActivatedRoute.
Este serviço ActivatedRoute pode ser aproveitado para poder recuperar
esses valores.
Agora, em particular, para facilitar essa recuperação de parâmetros,
o serviço ActivatedRoute fornece três coisas diferentes.
Por exemplo, ele fornece esse método para recuperar o URL.
Que é um observável do caminho da rota.
que é representado como uma matriz de strings para cada caminho de rota.
Você encontrou esta palavra observável aqui.
No momento, segure essa palavra.
Vamos voltar, veja o que é um observável no próximo módulo.
Mas no momento, o que percebemos é que este serviço
ActivatedRoute fornece isso observável.
Da mesma forma, o serviço ActivatedRoute também fornece outro observável chamado params.
Este parâmetro observável disponibiliza para um componente
os valores de parâmetro que estão sendo passados como o parâmetro route.
Então este parâmetro observável é aquele que vamos usar
para recuperar esse valor dentro do componente dishdetail.
Você verá o método exato de fazer isso
no exercício que segue esta palestra.
Da mesma forma, você também pode passar parâmetros de consulta para outro componente.
Agora, não vamos lidar com um exemplo dos parâmetros de consulta agora.
Mas, mais tarde, podemos encontrar um exemplo de como você pode passar na consulta
parâmetros através do serviço ActivatedRoute para outro componente.
Com este entendimento, vamos avançar para o próximo exercício.
Continuaremos a desenvolver o aplicativo de página única.
E então ative o uso de um parâmetro de rota para passar em
o id de um prato para o componente dishdetail.
Para que o componente dishdetail, por sua vez, possa usar este id para consultar o serviço de prato.
Para obter os detalhes desse prato específico que é
suposto exibir dentro de sua visão.
[MÚSICA]