Agora que você molhou seus pés com observáveis angulares no exercício anterior,
você está olhando para trás e dizendo,
“Oh observáveis não são tão ruins afinal de contas,
eles são bastante simples de fazer uso.”
Então, ficamos um pouco mais ambiciosos.
Vamos dar um passo adiante e, em seguida, fazer uso de um built-in observável dentro Angular.
Os parâmetros observáveis que vem de
o serviço de rota ativado dentro do nosso módulo de roteador.
Vamos agora atualizar o componente de detalhe do prato,
para fazer uso dos parâmetros observáveis de
o serviço de seca ativador para
apoiar alguns novos recursos dentro da nossa aplicação Angular.
Antes de avançarmos para atualizar o componente de detalhe do prato,
Eu quero introduzir mais um método no meu arquivo de serviço de prato. ts.
Então abra o arquivo service.ts prato e, em seguida, vamos adicionar um novo método chamado
GetDishids e isso basicamente vai
retornar todos os IDs prato é para todos os pratos em nossa coleção de pratos.
Então, para fazer isso, vamos usar um retorno
e do método e antes que eu faça isso,
isso está retornando um observável.
De que tipo?
Isso está retornando um observável que consiste em uma matriz de
string e vamos atrasar
por 2.000 milissegundos ou dois segundos.
Então, o que é que queremos retornar?
Queremos levar a matriz de pratos,
extrair todos os IDs da matriz de pratos e
, em seguida, dar ao nosso componente Dish Detail,
porque precisamos que dentro do nosso componente Dish Detail para implementar
o novo recurso que vamos apoiar em nossa aplicação.
Agora, esta é uma maneira que eu quero implementá-lo.
Mais tarde, podemos ver como podemos fazê-lo de uma maneira muito melhor,
em um dos exercícios posteriores.
No momento, com a forma como o serviço é implementado,
este é o melhor que eu poderia fazer para implementar esta solução para demonstrar um novo recurso.
Então, dentro do observável,
o que eu vou fazer é,
Eu vou levar a matriz de pratos e para a matriz de pratos.
Eu vou usar o mapa,
um operador de matriz, o mapa do operador de matriz JavaScript.
Então, o operador de mapa,
como ele funciona é que ele leva cada item da matriz de pratos e podemos mapear
esse item em outro item e, em seguida, construir
outra matriz e, em seguida, retornar essa matriz modificada.
Então, para cada item na minha matriz de pratos,
Eu vou pegar esse item e, em seguida, em vez
extrair o ID do prato e, em seguida, a partir do ID do prato.
Então, eu vou acabar construindo um novo array fora dele,
que contém apenas os IDs,
então uma matriz de IDs e já vemos que os IDs são string,
que é o que eu vou retornar do meu ID prato aqui.
É isso, o operador de matriz de mapas.
Se você procurar operadores de matriz JavaScript,
você verá o que o operador de matriz de mapa faz.
Na verdade, o operador de matriz de mapa também é
interessante da perspectiva dos observáveis,
porque um observável como você viu,
também pode ser visto como uma matriz,
um fluxo de valores,
que pode ser visto como uma matriz.
Então, o operador de mapa também pode ser usado em observáveis.
Mas neste momento, eu estou usando isso simplesmente como um operador de matriz JavaScript.
Vamos salvar as alterações.
Agora, vamos para o componente de detalhes Dish e, em seguida, atualizar o componente de detalhes Dish.
Agora, dentro do componente de detalhe Dish,
junto com o Dish,
Eu vou declarar uma variável chamada DISHIDs,
que é uma matriz de string.
Este DISHIDs irá armazenar todos os IDs de
todos os pratos que estão na minha coleção de pratos no meu menu.
Então, eu também terei
mais duas variáveis chamadas anterior e seguinte da string de tipo.
Agora, por que eu preciso disso?
Isso vai se tornar um pouco mais claro,
uma vez que você implementar a visão,
onde eu vou fazer uso disso.
Agora, o que eu vou fazer aqui é que,
dentro do meu NginIt anteriormente,
nós deixamos id é igual a mais este ID de parâmetros de route.snapshot.
Quando eu fiz isso no exercício anterior,
Eu não expliquei a você o que o instantâneo estava fazendo e por que estamos fazendo isso dessa maneira?
Porque você precisava entender os observáveis,
antes de entender o significado do instantâneo.
Agora, em Angular, o serviço de rota ativado fornece um conjunto de observáveis.
Um dos observáveis é chamado de parâmetros.
O que este parâmetro nos fornece,
é uma maneira de obter os valores dos parâmetros dentro da minha URL.
Então, você viu que quando você introduz os parâmetros de rota,
você introduziu um dos parâmetros de rota como dois pontos ID.
Esse ID de dois pontos fica disponível como um observável.
Então, sempre que esse valor muda,
, você pode observar as alterações nesse valor e, em seguida, agir de forma correspondente.
Mas, mais cedo, quando implementamos o componente de detalhe do prato,
nós não sabíamos sobre observáveis.
Então, eu não conseguia explicar o que o instantâneo estava fazendo naquele momento.
Agora, deixe-me voltar e explicar exatamente o que o instantâneo faz.
Quando usamos isso como instantâneo aqui,
o que estamos fazendo é,
estamos tirando um instantâneo de
o serviço de rota e, em seguida, estamos obtendo
o parâmetro observável naquele ponto específico do tempo.
O valor dos parâmetros naquele ponto específico do tempo
e, em seguida, fazer uso dele dentro da nossa aplicação.
Embora essa não seja a maneira ideal de fazê-lo.
Em vez disso, então vamos fazer uso do observável
diretamente e, em seguida, responder sempre que mudanças observáveis.
Então, como atualizamos esse código para fazer uso do observável diretamente?
Então, o que percebemos é que a partir do serviço de rota ativado,
temos os parâmetros observáveis disponíveis para nós.
Então, vamos fazer uso dos parâmetros observáveis e
a qualquer momento há uma mudança em onde params observáveis,
podemos iniciar uma mudança dentro do nosso componente DishDetail.
Deixe-me ilustrar para você como vamos fazer uso de
os parâmetros observáveis atualizando este código.
Então, indo para este código,
o que eu vou fazer agora,
é que eu vou mudar isso para dizer,
“Eu tenho essa rota e desta rota,
Eu já tenho os parâmetros disponíveis.”
Então, eu vou remover o instantâneo e eu uso os parâmetros.
Então, com esses parâmetros,
o que eu tenho agora é o acesso aos parâmetros observáveis.
Agora, já que temos esses parábolas observáveis,
Eu vou usar um operador neste parábolas observável e, em seguida, modificá-lo.
Então, o operador que eu vou usar é chamado operador SwitchMap.
O operador SwitchMap me permite
fazer uso dos parâmetros observáveis e você vê a linha vermelha rabiscada que significa,
que eu preciso importar o SwitchMap observável aqui.
Então, eu vou entrar para
minhas entradas aqui e
então eu vou entrar rxjs e operador.
Então, a partir dos parâmetros observáveis,
eu recebo params que é do tipo Params.
Então, lembre-se de que importamos os parâmetros da biblioteca do roteador aqui.
Então, nós imploramos para os parâmetros aqui,
da biblioteca do roteador e também importamos o serviço de rota de ativação aqui,
e então nós os disponibilizamos dentro do nosso construtor aqui,
através da rota do ativador.
Então, é por isso que somos capazes de fazer esta rota params para obter os parâmetros observáveis.
Eu vou usar o operador SwitchMap nos params
observável e, em seguida, quando eu obter os parâmetros observáveis,
o que eu vou fazer é pegar isso e, em seguida, dizer, este DishService.
GetDish e, em seguida, este ID agora deve ser obtido usando os parâmetros.
Você vê o parâmetro que temos lá.
Dos parâmetros, eu vou dizer dentro de parênteses ID.
Então, o que acontece é que sempre que os parâmetros observáveis mudam de valor,
o que significa que o parâmetro de rota muda de valor, então imediatamente,
o operador de mapa de switch tomará o valor de params,
e, em seguida, fazer um GetDish do meu DishService.
Então, isso seria iniciado automaticamente,
e isso estará disponível como o outro
observável que é emitido fazendo este operador de mapa switch neste observável.
Então, estamos criando um novo observável que é o GetDish,
que vai retornar o objeto prato aqui.
Agora, uma vez que obtemos o GetDish lá,
então que agora pode estar disponível como um observável.
Eu só assino para que observável usando o subscrever aqui.
Então, lá eu obtenho o prato.
Este prato é obtido fazendo este GetDish aqui.
Esse prato, então eu posso fazer uso para mapeá-lo em
minha variável prato que eu declarei anteriormente.
Então, desta forma, meu prato agora fica atualizado.
Então, a qualquer momento que os parâmetros observáveis mudanças,
meu prato será atualizado para o novo prato.
Então, observe como eu estou tomando um observável, os parámetros observáveis,
e então eu estou mapeando os parámetros observáveis em outro observável que é basicamente
indo em buscar o valor do prato do meu DishService,
e, em seguida, tornando isso disponível como um observável.
Então, eu estou assinando para que observável aqui, e então,
Eu estou recebendo o valor do prato aqui,
e então eu estou mapeando o valor do prato ou melhor
tornando a variável do prato igual ao valor do prato aqui.
Observe como usando os observáveis,
agora você é capaz de pegar um observável e, em seguida, mapeá-lo para outro observável.
Por que isso é interessante?
Se agora, eu tenho uma maneira de modificar esse parâmetro de rota,
então eu serei capaz de alternar entre pratos diferentes e ver os pratos diferentes.
Infelizmente, eu não tenho isso no lugar.
Então, eu preciso modificar os componentes do prato para me permitir fazer isso.
Agora, este é o lugar onde eu vou incluir alguns botões na minha visão que quando eu clicar,
eu vou ser capaz de navegar através da minha lista de pratos.
Agora, para poder navegar pela minha lista de pratos,
Eu preciso saber o conjunto de todos os meus pratos,
ou pelo menos eu preciso saber os IDs de todos os meus pratos.
Essa é a razão pela qual eu uso este DISHIDs aqui, ok?
Então, agora você vê por que eu incluí o método DISHIDs no meu DishService.
Então, então eu começo.
Eu vou primeiro obter
os DISHIDs por
chamando o método DishService,
GetDishIDs nesse ponto.
Eu ainda estou trabalhando com a velha maneira de fazer as coisas.
Eu tenho que perceber que este GetDishIDs está enviando em observável.
Então, eu preciso me inscrever para que observável.
Você vê como você precisa mudar sua maneira de pensar quando
você está operando com as variáveis aqui.
Então, nós diríamos DISHIDs subscribe,
e dentro do subscribe,
vamos obter o parâmetro que é uma matriz de string,
e então eu diria que ali mesmo,
DISHIDs será igual a DISHIDs.
Veja, como é fácil
mudar sua maneira de pensar quando você quer lidar com um observável.
Então, o GetDishIDs está enviando um observável,
e eu estou assinando para que observável e então eu tenho os DISHIDs aqui disponíveis.
Em seguida, também assinando o parâmetro.
Se eu puder alterar meu parâmetro,
valor valor de parâmetro de rota dentro do meu código,
então eu serei capaz de navegar entre os pratos.
Então, vamos implementar essa parte.
Isso está ficando interessante.
Então, para me permitir fazer isso,
então eu vou introduzir outro método aqui chamado setPrevNext,
e para isso, vou enviar um parâmetro dishID.
Agora, dado o meu DisID atual,
Eu queria ser capaz de encontrar o anterior e o próximo DisID para que eu possa implementar
minha navegação entre os pratos dentro do meu componente dishdetail.
Então, essa é a razão pela qual eu declarei o prev e o próximo.
Agora, eu preciso ser capaz de inicializar esses dois valores.
Tudo o que eu sei agora é o meu DisID atual.
Então, usando o DisHid atual,
Eu quero ser capaz de encontrar o anterior e o próximo DisHid.
Então, neste método,
Eu vou fazer o anterior e o próximo DisID.
Então, aqui vou dizer,
deixe índice igual a este DISHIDs.
Agora, eu sei apenas o ID do meu prato,
mas o ID do meu prato não me dá tudo.
Eu preciso ser capaz de encontrar o prato nesta matriz de IDs,
então é por isso que eu estou dizendo isso DISHIDs, e indexOf.
Você deve conhecer o operador IndexOf em uma matriz JavaScript.
O operador indexOf obtém um valor e, em seguida, localiza o índice desse valor na matriz.
Então, indexOf e o parâmetro aqui,
vou dar é o DisHID,
o DisHID que obterei em pouco tempo.
Agora, uma vez que eu obter o índice deste valor atual,
eu posso então mapear
os dois DISHIDs anteriores.
Então, este é o lugar onde eu
vai fazer um pouco de código complicado aqui que me permitirá enrolar quando eu estiver.
Então, observe que esta matriz DISHIDs contém um certo número de valores lá.
Se meu valor atual do meu DisID for o primeiro item,
então o valor anterior será o item indexado zero na minha matriz.
Mas se meu valor atual é o item zero,
o primeiro item na minha matriz,
então eu quero enrolar para obter o último item na minha matriz.
Então, este é o lugar onde eu faço uso do operador módulo com
alguma maneira matemática de embrulhar as coisas ao redor.
Então, eu diria que este DisHid
mais índice menos um, e modulo este comprimento DISHIDS.
Então, o que eu estou fazendo é,
o valor anterior será o índice atual,
índice do valor atual,
mais o comprimento dos pratos menos um.
Agora, se o índice for um,
index menos um me dará zero.
Se o índice for zero,
índice menos um me dará menos um,
mas não é isso que eu quero.
Eu quero enrolar e obter o comprimento DishID menos um.
Então, é por isso que eu estou incluindo isso lá,
e, em seguida, fazendo um módulo com os DISHIDs.
Então, quando o índice é zero,
eu vou enrolar para obter o último item na minha matriz.
Então, é assim que eu inicializar o valor anterior.
Então, o próximo valor,
Vou usar a mesma abordagem,
mas envolva dizendo índice mais um.
Então, se eu estou atualmente no último item na matriz,
então eu quero envolver em torno de zero.
Então, essa é a outra parte do que estou fazendo.
Então, lá, eu estou definindo o anterior e o próximo.
Então, quando devo definir o anterior e o próximo?
Sempre que meu prato mudar,
Eu preciso ser capaz de iniciar uma chamada para isso.
Agora, onde estou mudando o valor do meu prato?
Olhando para trás para a assinatura aqui,
notar que ali mesmo,
você está mudando seu prato cada vez que o nosso parâmetro muda.
Então, nesse ponto,
Eu quero redefinir meu valor anterior e seguinte.
Então, eu vou mudar isso em um bloco de código aqui.
Então, eu diria que este setPrevNext,
e, em seguida, o parâmetro seria DishID.
É isso. Então, com esta mudança,
o que acontece é cada vez que meu prato é atualizado,
Eu vou atualizar o anterior e o próximo também correspondentemente a partir daqui.
Então, com esta pequena mudança,
meu DisHid será o prato atual.
O anterior estará apontando para o prato anterior,
e o próximo será apontado para o próximo DisID.
Então, eu tenho todos os três que eu preciso.
Agora, eu posso fazer uso desses três valores, a fim de implementar a maneira de navegar
entre os pratos no meu modelo, incluindo um par de botões no meu modelo.
Então, vamos para o modelo de componentes dishdetail,
e, em seguida, incluir alguns botões que me permitem navegar entre os pratos.
Indo para o componente Dish Detail enquanto eu estiver aqui,
deixe-me pegar este nGif deste cartão e depois movê-lo para o div lá em cima.
Eu quero esconder todo o div,
quando meu prato não está atualmente defeito,
da mesma forma para os comentários também.
Acho que isso é um pouco chocante
quando minha informação do prato está sendo obtida do servidor.
Então, eu vou fazer essa mudança para ambos os dois divs que
um mostrando os comentários e o outro mostrando os detalhes do prato no cartão.
Com essas duas atualizações,
dentro de minhas ações de cartão,
Eu vou incluir
mais um botão do tipo de botão obviamente e este botão,
Vou incluir o RouterLink.
No momento em que você vê o link do roteador,
você imediatamente diz, “Oh,
Eu sei o que você está tentando fazer.
Você está tentando converter este botão para poder navegar entre
os diferentes componentes dentro do meu serviço.”
Então, para o RouterLink,
Eu vou fornecer uma matriz de valores e a matriz de valores para o RouterLink,
Eu vou fazer dishdetail.
Além disso, a segunda parte.
Veja, esta é a parte interessante.
A segunda parte desta matriz será prev,
que é a variável que eu declarei no meu componente.
Então, com isso, este botão se tornará um link para o prato anterior na minha lista de pratos.
Spiffy, certo?
Então, com isso, o que mais?
Deixe-me fechar o botão aqui e, em seguida, dentro do botão,
Eu vou usar uma fonte impressionante ícone
fa chevron-left.
Então, é isso. Este botão será um botão com um ícone lá.
Então, agora temos um botão aqui,
Eu também vou incluir outro botão aqui.
Antes de incluir o botão,
Eu vou fazer span classe flex-spacer,
você me viu usando o flex-spacer em um dos exercícios anteriores.
Então, você vê o que eu estou fazendo,
Estou esticando para incluir o segundo botão.
Então, para o segundo botão,
Eu só vou copiar este
e, em seguida, colá-lo lá e, em seguida, atualizar este para dizer prev.
Em vez de anterior, vou seguir e depois
fa-chevron-esquerda para fa-chevron-direita, e é isso.
Vamos salvar as alterações nos nossos Dish Detail Components,
e também nos arquivos restantes.
Após esta atualização, vamos verificar o que nosso aplicativo faz.
Indo para o meu aplicativo no navegador,
vamos para o componente Menu.
Vemos o Menu e vamos selecionar um item do Menu aqui.
Então, observe que agora este item do prato do menu é exibido aqui.
Aviso na parte inferior,
temos dois botões aqui, esquerda e direita.
Quando clicamos no botão esquerdo,
note como somos capazes de passar para o prato anterior na lista de pratos.
Eu posso continuar fazendo esquerda novamente e continuar navegando para a esquerda e para a direita.
Observe que quando eu faço isso,
minha visão real não está sendo recarregada,
em vez disso eu só vou buscar
os dados relacionados com pratos do serviço e, em seguida, atualizar minha visão aqui.
A razão pela qual somos capazes de fazer isso é porque nós
temos o observável, os parâmetros observáveis.
Então, sempre que eu clicar nesses dois,
esquerda e direita, os parâmetros observáveis,
observe como neste momento o endereço mostra o dishdetail zero.
Se eu clicar à direita,
então que será atualizado de dishdetail zero para dishdetail um.
Essa mudança de parâmetro, e isso fará com que o meu observável para
ir e buscar o novo prato do serviço de prato.
Então, o novo prato é buscado,
a variável prato no meu componente é atualizado,
e quando isso é atualizado,
minha visão também é atualizado.
Então, note que eu estou usando a mesma vista,
Eu sou capaz de navegar entre os vários pratos que fazem parte da minha lista de pratos.
Esta é a parte interessante que você pode obter usando o params
observável a partir do activator.service dentro do seu aplicativo Angular.
Interessante maneira de fazer uso de notas observáveis nossa aplicação Angular.
Claro, a maneira como eu implementei isso,
Eu fiz isso um pouco de uma maneira inventada de fazer as coisas.
Eu tinha que se apossar da lista de IDs de prato.
Eu tive que modificar o anterior e o próximo e assim por diante.
Se você tivesse uma maneira de obter o
anterior e o próximo valor automaticamente do seu serviço,
sempre que você buscar um prato,
então a implementação da pontuação se tornará um pouco mais fácil.
Agora não temos isso.
Então, eu trabalhei em torno do problema porque eu só queria ilustrar a maneira
de usar um observável como este dentro de seu aplicativo Angular.
Se pudermos implementar o serviço que retornará o
anterior e o próximo valor sempre que buscarmos um prato,
então toda essa dor de cabeça será muito mais simplesmente resolvida.
Vamos adiar essa ideia para uma fase posterior.
Mas no momento, você vê como estamos fazendo
uso dos parâmetros observáveis, a fim de implementar
uma maneira interessante de apoiar um novo recurso dentro da nossa aplicação Angular.
Isso conclui este exercício.
Este é um bom momento para você fazer um commit git com a mensagem RXJS Parte dois.