Vamos agora continuar a trabalhar em
o aplicativo de página única que temos vindo a desenvolver em nossos exercícios.
Até agora, integramos o componente inicial,
o componente de menu e o componente de contato em nosso aplicativo de página única.
O componente de detalhe do prato está sendo usado atualmente na parte inferior do componente de menu.
Então, quando você clica em qualquer um dos itens no menu,
os detalhes do prato são exibidos logo abaixo no menu.
Agora, vamos aproveitar outro suporte que o módulo de roteador Angular fornece,
que nos permite definir uma rota com um parâmetro incluído na definição de rota.
Desta forma, podemos passar informações para outro componente,
e, em seguida,
exibir informações no outro componente.
Como isso funciona?
Vamos aprender isso fazendo este exercício.
Então, voltando ao nosso aplicativo,
neste aplicativo, quando você olha para o menu,
quando você clica em qualquer item no menu,
os detalhes do item selecionado são exibidos logo abaixo no menu.
Agora, eu gostaria de separar a visão dos detalhes
deste prato em particular em sua própria visão separada.
Quando eu clico em qualquer um destes,
Eu quero ser capaz de exibir os detalhes do prato,
especificamente em uma vista nesta aplicação.
Para conseguir isso, vamos aproveitar, como eu disse,
com os parâmetros de rota para permitir
nós para suportar esse tipo de comportamento em nossa aplicação.
Como vamos fazer isso?
Vamos fazer isso começando com a definição de uma nova rota com um parâmetro aqui.
Para fazer uso do componente detalhe prato,
vamos para as rotas,
e, em seguida, definir uma nova rota após menu aqui.
Veja a forma como a rota é definida aqui.
Então, este é caminho, dishdetail.
Então, este detalhe prato é parte do componente detalhe prato.
Então, ele tem sua própria visão.
Agora, eu quero ser capaz de navegar para essa visão,
mas com um ID de parâmetro,
porque esta exibição de detalhes do prato pode exibir qualquer um dos pratos no meu menu.
Então, eu quero ser capaz de exibir um prato selecionado no detalhe do prato.
Agora, que é selecionado prato terá um ID,
e eu quero passar esse ID para o meu prato componentes detalhados,
para que ele possa renderizar os detalhes desse prato em particular.
Então, no Roteador Angular,
ele suporta a passagem em parâmetros definindo parâmetros de rota como este,
na definição do próprio roteador.
Então, dentro do caminho,
se eu disser dois pontos,
para que dois pontos podem ser seguidos por um nome que irá agir como um parâmetro de rota.
Então, neste caso, eu vou usar o nome do parâmetro como um ID.
Este ID refere-se ao ID do prato que já demos a cada um dos nossos pratos.
Agora, isso vai me levar para o componente detalhe prato.
Então, vamos adicionar nesta nova rota à nossa definição de rota Angular aqui.
Salve as alterações.
Agora, no componente de menu,
assim, quando eu abrir o arquivo de modelo de componentes de menu,
no componente de menu,
Estou exibindo o prato na parte inferior aqui.
Então, eu não quero fazer isso.
Então, eu vou excluir essa parte do meu modelo de componentes de menu.
Em vez disso, o que eu percebo é que ali mesmo,
Eu sou capaz de acessar o prato particular.
Então, quando o prato é clicado,
em vez de fazer este clique aqui,
então eu vou remover este clique aqui, e em vez disso,
Eu vou definir um novo parâmetro aqui chamado RouterLink.
Você verá o uso do RouterLink aqui.
Agora, este RouterLink leva em valores que você pode fornecer em seu modelo como este.
Então, você pode fornecer isso como uma matriz aqui.
Dentro da matriz, você pode fornecer duas partes de uma matriz.
Então, dishdetail.
Então, você viu que quando eu defini a rota, eu disse “/dishdetail/:id.”
Então, o roteador Angular passará em qualquer parâmetro que eu fornecer
aqui como parte da segunda parte desse URL lá.
Então, agora, junto com o detalhe do prato,
Eu vou construir meu RouterLink usando o detalhe do prato,
e também o ID do prato aqui.
Então, este ID prato referem-se ao prato específico que eu tenho
selecionado a partir da matriz de pratos aqui.
Então, esse ID do prato,
Eu tenho acesso a ele aqui.
Então, eu vou usar isso como a segunda parte dentro desta matriz de parâmetros,
que eu vou passar para o meu RouterLink aqui.
Então, se eu defini-lo assim,
então, quando eu clicar nesse item específico no meu menu,
então que detalhado, o ID do prato,
juntamente com este dishdetail,
será passado como o link do roteador.
Então, essa informação ficará disponível através do
meus Roteadores angulares para meus componentes de detalhe prato.
Então, o roteador permite que o componente de detalhe prato recupere esse valor,
dish ID, da rota Angular quando essa informação é passada para ele.
Como fazemos isso? Para isso,
precisamos ir para o componente de detalhes do prato e corrigir isso para receber essa informação.
Então, depois de fazer essas alterações no componente de menu,
vamos agora mudar para o componente de detalhe do prato.
Dentro do componente detalhe prato,
você vê que atualmente,
eu estava recebendo o prato como uma entrada aqui.
Eu não vou mais receber os pratos e entradas.
Então, vou deixar isso como tal,
como simplesmente um prato.
Eu não preciso mais da entrada porque eu não estou passando nesta informação usando o prato,
entre colchetes que eu incluí no meu componente de menu.
Em vez disso, esta informação sobre os pratos específicos que vêm através do roteador Angular.
Como faço para obter acesso a esse ID do prato?
Então, para fazer isso,
eu vou aqui.
Nesta aplicação, vou adicionar mais duas importações aqui,
uma delas chamada Params.
Então, este Params me dá acesso a
os parâmetros do roteador que estão disponíveis quando eu entrar.
Então, este é do roteador Angular, Params,
e também outro que eu preciso é o Local.
Localização permite-me rastrear a localização de
minha página no histórico do meu navegador.
Então, isso seria útil para mim para navegar de volta do meu detalhe prato quando eu preciso.
Você vai me ver usando isso um pouco mais tarde.
Então, duas coisas que eu preciso importar: Params e Localização.
Vamos ver como fazemos uso desses dois em nossa aplicação.
Então, junto com isso,
vamos entrar e aqui, para o construtor,
agora notamos que o valor do prato não está disponível no meu componente de menu.
Mas em vez disso, eu tenho que ir explicitamente e buscar isso do DishService.
Então, eu vou importar
o DishService também para o meu componente detalhe prato.
DishService aqui.
Então, isso me permitirá ir buscar um prato específico do Serviço de Prato.
Então, você se lembra que já temos
o método GetDish e o serviço Dish que podemos usar.
Agora, a próxima coisa importante para nós é pegar o id do prato.
Agora, como podemos obter o id do prato.
Então, aqui é onde no construtor.
Agora, eu preciso fazer todos esses serviços disponíveis,
então eu vou dizer Dish Service.
Em seguida, o outro é Localização.
Então, Localização é outro serviço que está disponível para mim.
Então, ambos serão usados dentro do meu aplicativo.
Então, quando este componente prato é inicializado,
então neste ponto no NGoninit,
Eu posso ir e buscar a informação sobre o prato específico dos Params.
Então, como fazemos isso? Então, nós deixamos id.
Então, este é o lugar onde eu vou buscar o id,
então eu diria mais isso.
Também para buscar o valor da rota,
Preciso injetar outro serviço chamado serviço ActivatedRoute.
Isso faz parte dos roteadores angulares.
Portanto, este serviço ActivatedRoute dá-me acesso à rota aqui.
Então, eu diria,
assim junto com o DishService eu também preciso definir um mais chamado
como rota que seria o serviço ActivatedRoute aqui.
Então, todos esses três estarão disponíveis para mim.
Então, ali mesmo, Eu posso pedir por
esta rota, Snapshot, Params.
Este Params é um array para
que eu posso indexar usando o id como o valor, então Params id.
Isso me busca o id do parâmetro.
Então, quando eu definir esse URL,
o URL para isso seria definido como Dishdetail.
Por exemplo, DishDetail 0,
DishDetail 1, DishDetail 2 e assim por diante.
Então, é assim que as URLs para esses componentes serão definidas lá.
Então, esse valor eu vou buscar aqui.
Agora, uma vez que eu me apossar da idéia do prato, então eu posso dizer,
este prato igual a DishService
e obter prato eo GetDish vai tomar o id como o parâmetro aqui.
Então, com isso, quando eu clicar em um prato no meu componente de menu,
esse link que eu tenho o link do roteador que eu tenho configurado lá,
passará o id do prato para o meu roteador como RouterParameter,
e que ficará disponível para mim em
meu componente DishDetail acessando o ActivatedRoute serviço aqui.
Então, uma vez que eu me apossar dele,
então eu posso usar esse valor para consultar o prato aqui.
Agora, esta não é a maneira completa de fazer as coisas.
Mais tarde, no próximo módulo,
vamos usar algo chamado JavaScript reativo.
Então, nesse ponto, voltarei para redefinir isso em
de uma maneira diferente para que meu componente DishDetail possa manter o controle de
todas as alterações que eu fizer no meu URL e
alterar automaticamente as informações que estão sendo exibidas por esse componente.
Chegaremos a isso em um dos exercícios posteriores no próximo módulo,
mas isso funciona bem no momento, então vamos usar isso.
Além disso, agora quando eu vou para os detalhes do prato
Eu quero ser capaz de voltar para o menu do prato.
Então, eu vou adicionar em um botão Voltar no meu cartão um botão Voltar no meu cartão,
que quando pressionado vai me levar de volta para o local anterior no meu navegador.
Então, para fazer isso eu vou adicionar em um método aqui chamado goBack,
que essencialmente fará uso
do serviço de localização que eu incluí aqui.
O serviço Localização fornece um método chamado Voltar que me permite voltar
para o item anterior no histórico do navegador.
Então, dessa forma, eu vou navegar de volta para o menu a partir dos detalhes aqui.
Então, este método GoBack é adicionado aqui.
Agora, precisamos ir e corrigir o componente DishDetail aqui.
Então, no arquivo de modelo de componentes DishDetail,
aqui temos dois botões que são como e botão Compartilhar.
Vou adicionar mais um botão aqui.
Para este botão, eu adicionaria,
se este botão for clicado,
isso resultará em uma chamada para o método goBack que eu
adicionei ao meu component.tsfile DishDetail.
Então, este seria um botão Voltar lá.
Enquanto estamos nisso,
nós podemos muito bem corrigir os componentes de rodapé links também.
Então, indo para o arquivo footercomponent.htmlna parte inferior aqui onde temos esses links,
Eu vou adicionar no RouterLink aqui com
o parâmetro home para o primeiro,
e depois menu para o segundo,
e entre em contato conosco para o terceiro no rodapé aqui.
Vamos salvar as alterações.
Indo para o seu aplicativo,
se você agora clicar no menu,
os itens de menu são mostrados aqui.
Se clicarmos em qualquer um dos itens do menu,
você notaria que os detalhes do prato são mostrados em uma vista separada aqui.
Este detalhe, como você pode ver,
isso é exatamente o que o componente DishDetail estava exibindo anteriormente,
mas na parte inferior do menu no componente menu,
agora temos que exibir em uma exibição separada.
Agora, este componente DishDetail,
agora você pode voltar ao menu clicando no botão Voltar.
Então, quando você clica no botão Voltar,
você está de volta ao menu.
Quando você clica em outro item,
você vê que os detalhes desse item específico está sendo exibido aqui,
da mesma forma para o terceiro também e então você pode voltar.
Agora, quando você clica em qualquer um desses itens,
anote o valor da URL na barra de endereço.
Então, este é o host local 4,200 barra DishDetail barra 0.
Este zero é o id deste prato.
Então, esse valor está sendo passado,
e é assim que o componente DishDetail aqui está sendo mostrado aqui, volte.
Quando você clica no outro item,
você pode ver que agora nas URLs diz, DishDetail barra 1.
Da mesma forma, para o quarto,
diz DishDetail barra 3, e assim por diante.
Então, esse valor de parâmetro é aquele que indica para
o componente DishDetail qual prato particular
deve ser mostrado pelo componente DishDetail.
Isso é o que está sendo usado pelo componente DishDetail para recuperar as informações sobre
esse prato específico do DishService usando o método GetDish,
e, em seguida, essas informações estão sendo exibidas na exibição do componente DishDetail.
Então, agora neste exercício,
nós aprendemos como podemos usar RouteParameters para passar informações para um componente,
e, em seguida, o componente obter acesso ao parâmetro e, em seguida, usa esse RouteParameter
para decidir a forma como ele renderiza
a exibição ou buscar as informações e renderizar a vista em conformidade.
Com isso, completamos este exercício.
Nós já quase concluímos a construção do nosso aplicativo de página única
para o aplicativo de restaurante que temos trabalhado até agora.
Este é um bom momento para você fazer um commit git com a mensagem,
Aplicativo de página única parte 2.