Agora que examinamos a ligação de dados,
vamos fazer uso deles para
trabalhando no aplicativo Angular que temos usado até agora.
Na versão anterior do aplicativo Angular,
tínhamos o menu sendo renderizado,
e então tínhamos um prato específico sendo mostrado na parte inferior.
Agora, gostaríamos que o usuário pudesse clicar em
em qualquer um dos itens do menu e, em seguida, os detalhes a serem mostrados ao usuário.
Aqui é onde o uso de ligação de dados nos ajudará
a implementar nosso aplicativo para habilitar esse tipo de recurso.
Indo para o estado atual da nossa aplicação no navegador,
agora podemos ver que temos o nosso menu e na parte inferior temos
os detalhes de um prato específico sendo mostrado lá.
Agora, isso é bom e bom para começar, mas idealmente,
o que gostaríamos de ter é que se o usuário clicar em qualquer um desses pratos,
nós queremos ser capazes de mostrar os detalhes do prato na parte inferior do menu aqui.
Então, gostaríamos que os detalhes do prato fossem alterados
com base em qual prato específico clicamos em qualquer momento.
Então, como conseguimos isso?
Então, é aqui que o uso de ligação de dados vem para o nosso resgate.
Indo para o nosso aplicativo,
a primeira coisa que eu vou fazer é na pasta compartilhada,
agora você percebe que a informação do prato está sendo
usado tanto no componente do menu como no componente de detalhe do prato.
Agora, quando você tem informações sendo compartilhadas assim,
seria bastante mais conveniente ter um lugar centralizado
a partir do qual esta informação é fornecida para ambos os componentes.
Então, para me ajudar a fazer isso,
o que eu vou fazer é ir para a pasta de compartilhamento e, em seguida, criar um novo arquivo,
e então eu vou nomear este arquivo como dishes.ts.
Dentro deste arquivo dishes.ts,
Eu vou criar a constante que fornece os detalhes dos pratos.
Então, para fazer isso,
Eu importaria primeiro o prato,
da classe de prato
que eu já defini anteriormente.
Então agora, eu posso definir uma constante
chamado como pratos do tipo uma matriz de pratos,
e então é aqui que eu vou armazenar os detalhes de todos os meus pratos.
Agora, na versão anterior do aplicativo,
vimos o uso dos pratos e vimos
a matriz de objetos JavaScript que contém os detalhes dos pratos.
Agora, vamos mover todo esse conteúdo e com uma versão atualizada dele.
Então, uma versão atualizada dos pratos
array de objetos JavaScript é dada a você nas instruções,
então basta ir e copiar
toda a matriz de objetos JavaScript de lá e então vamos colá-lo no lugar aqui.
Então, este se torna o local central a partir do qual
as informações de pratos são fornecidas para a sua aplicação.
Eu tenho agora cortado e colado os detalhes de
o prato que são dadas nas instruções de exercício no lugar aqui,
e assim eu tenho quatro pratos colados aqui um,
dois três, e quatro pratos colados aqui,
e cada um desses pratos contém, claro
os detalhes do prato específico e também comentários para o prato.
Agora, desta forma, renderizar as informações em
o modelo de detalhes do prato torna-se simples para qualquer um desses pratos escolhidos.
Agora, se você reverter você verá que há algumas linhas vermelhas aqui.
A razão para essas linhas vermelhas é porque quando você olha para o objeto prato aqui,
você verá que no objeto prato não temos uma propriedade lá chamada como comentários.
Então, precisamos criar uma nova propriedade chamada
comentários para adicionar a esse prato aqui. Então, como fazemos isso?
Então, para fazer isso, vamos dizer comentários e
então eu diria matriz comentário aqui.
Agora imediatamente você percebe que não há nenhuma matriz de comentários disponível para nós,
então precisamos criar essa matriz de comentários.
Então, o que eu vou fazer é eu vou criar outra classe JavaScript
que contém os detalhes do comentário lá.
Então, para fazer isso, primeiro vou importar comentário de
a classe de comentário aqui.
Agora é claro que a linha vermelha imediatamente me diz que eu não tenho uma aula de comentário.
Então, como adicionamos uma classe de comentário?
Então, indo para a pasta compartilhada,
vamos criar um novo arquivo chamado comment.ts e dentro deste comment.ts,
vamos definir uma classe chamada comentário aqui.
Agora, precisamos definir certas propriedades para esta classe de comentário.
Então, quais são as propriedades que temos?
Vamos dar uma olhada rápida no nosso arquivo dishes.ts
e, em seguida, vamos ver quais são as propriedades para cada comentário.
Indo para o arquivo dishes.ts,
você vê que os comentários contêm
uma propriedade chamada como uma classificação que parece ser um número,
então você tem um comentário que é uma string e
autor que é uma string e uma data que também é uma string.
Então, precisamos definir quatro propriedades para minha classe de comentário aqui.
Então, voltando para a classe de comentário,
Eu definiria classificação como número.
Então, no script tipo,
tudo é um número aqui, então tivemos comentário que é um autor string,
que também é uma string,
e, em seguida, data que também é uma string aqui.
Então, estas são as quatro propriedades que temos aqui.
Agora, obviamente temos visto como usamos a string de data no exercício anterior,
e na atribuição como fizemos uso de
a string de data para mostrar a data para o comentário lá.
Agora, no caso de você estar se perguntando,
o que essa string de data realmente contém?
Indo aqui, você verá que esta string de data está com um determinado formato.
Então, este é o formato padrão para armazenar uma data aqui.
Este formato de data é a forma ISO OSI de especificar o formato de data.
Então, nós vamos apenas usar isso,
então este é um formato padronizado que é usado também em
muitas linguagens de programação que permite armazenar os dados como uma string aqui,
então eu vou apenas fazer uso dele como tal aqui.
Depois de fazer as alterações no arquivo
dish.ts como este aqui e, em seguida, também adicionando na classe de comentário aqui,
agora vemos que o arquivo dishes.ts não tem mais essas linhas vermelhas porque
o comentário foi adicionado como uma matriz de objetos para minha classe de prato aqui.
Então, isso funciona bem até agora.
Agora, como fazemos uso disso?
Agora para fazer uso disso,
vamos para o component.ts menu,
e então aqui temos esta constante definida aqui.
Agora, esta não é a maneira certa de fazê-lo
mais tarde você vai me ver usando um serviço para tudo isso.
Então, deixe-me cortar esta constante a partir daqui completamente e em vez de usar essa constante,
Eu vou agora importar pratos
da pasta compartilhada
aqui, pratos compartilhados aqui.
Então, observe que esta pasta de pratos está exportando a constante de pratos aqui.
Então, essa é a razão pela qual somos capazes de fazer uso dele.
Então voltando para os pratos um aqui,
Eu preciso exportar isso daqui,
então eu diria exportação.
Constante. Então, quando eu faço isso,
então no meu componente de menu eu posso ver que meus pratos podem ser importados aqui corretamente.
Então, o resto do código aqui funcionará bem sem quaisquer alterações.
Você verá que se você salvar os valores agora
e, em seguida, você olhar para o seu aplicativo web no navegador,
ele vai renderizar muito bem mesmo após essas mudanças.
Depois de salvar todas as alterações que você fez até agora em todos os arquivos,
se você ir e olhar para a sua página web,
sua página web renderiza exatamente como antes.
Agora, a segunda parte do problema.
Queremos ser capazes de nos comunicar.
Quando clicamos em qualquer um desses itens de menu,
queremos ser capazes de comunicar essa informação para que
o prato correspondente seja renderizado aqui.
Então, é aqui que vamos ter a ajuda de
a ligação de dados que aprendemos até agora.
Voltando para o arquivo de modelo de componentes de menu,
o que vamos fazer é que para
este “app-dishdetail” que você inclui na parte inferior aqui,
para adicionar no modelo de componentes de detalhe prato para o modelo de componentes de menu,
vamos adicionar em uma propriedade chamada como Dish.
Em seguida, vamos atribuir este para ser “SelectedDish”.
Você vai lembrar que o prato selecionado é uma variável que temos
definido em nosso arquivo TypeScript componentes do menu aqui.
Então, dessa forma; esse valor do prato selecionado vai
ser passado através deste prato de propriedade aqui.
Agora, vamos ver como o componente detalhe prato pode recuperar esta informação
e, em seguida, fazer uso dela bem na próxima etapa do exercício.
Agora, enquanto estamos aqui,
também vamos resolver o outro problema que precisamos lidar.
Ou seja, quando qualquer um dos itens de menu é clicado,
então ele vai gerar um evento de clique e queremos que as informações para ser
entregues ao nosso componente de menu arquivo TypeScript.
Então, para fazer isso, vamos para listas de grade de menu que definimos aqui.
Para este bloco de grade aqui,
o que eu vou fazer é definir o evento clique aqui.
Então, para o evento clique,
o que eu vou fazer é eu vou chamar o método de seleção
que eu vou definir dentro do meu arquivo component.ts menu.
Para este método OnSelect,
Eu vou fornecer o prato como o parâmetro aqui.
O que é este prato?
Este prato é exatamente este prato que você selecionou em
este “deixe prato de pratos” na sintaxe NGFor aqui.
Então, esse prato específico,
fora da matriz de pratos que você selecionou aqui,
será passado como um parâmetro para este método OnSelect,
o que vamos implementar em nosso arquivo component.ts de menu.
Então, agora que fizemos isso,
então este é o manipulador que precisa ser implementado.
Vamos para o arquivo componente de menu e, em seguida, corrigir
este arquivo para implementar este manipulador lá.
Assim, quando você fizer um clique em qualquer um dos itens do menu,
então o identificador correspondente será chamado e
a informação específica do prato será passada como um parâmetro aqui.
Indo para o arquivo component.ts do menu, agora,
o prato selecionado será atribuído um valor baseado em qual prato eu selecionar.
Então, eu vou remover essa parte e, em seguida, logo abaixo aqui,
Vou implementar o método onSelect aqui.
Então, para o método onSelect,
isso obterá um parâmetro que é o parâmetro dish.
Quando esse parâmetro de prato entrar,
Eu vou atribuir este SelectedDish igual a prato,
o parâmetro que veio como o valor para o método onSelect aqui.
Então, é isso.
Então, quando você clicar em qualquer um desses itens no menu,
qualquer um dos pratos no menu,
essa informação do prato será passada através disso e, em seguida,
o prato selecionado será atribuído a esse objeto prato aqui.
Agora, temos como a informação vem do DOM.
O clique específico fará com que a informação do prato
esteja disponível para nós e o prato selecionado será atribuído esse valor.
Agora, voltando para o componente de menu arquivo HTML,
vemos que já atribuímos esta propriedade dish para SelectedDish.
Então, dessa forma, esse valor de prato selecionado está sendo passado
através desta propriedade dish para este app-dishdetail aqui.
Agora, como meu componente detalhe prato se apossar dessa informação?
Para isso, vamos para o componente detalhe prato e corrigir isso.
Indo para o componente detalhe prato,
a primeira coisa que eu vou fazer é excluir
esta constante prato do meu componente detalhe prato.
Eu não preciso mais dele.
Agora, quando uma propriedade está sendo vinculada,
como o que vimos no componente de menu arquivo HTML,
então no meu arquivo de detalhe prato,
Eu posso usar outro módulo chamado como o módulo de entrada.
Então, para este prato,
Eu vou simplesmente declarar isso como DISH.
Agora, este módulo de entrada me permite declarar um decorador
para esta variável prato que eu defini aqui,
como este, na entrada com o parêntese aqui para aquele prato aqui.
Então, também, Eu preciso importar
a classe de prato
do prato compartilhado aqui.
Então, com isso, então o que aconteceu é que eu estou fazendo uso do módulo de entrada.
Então, esta é uma maneira de você fornecer informações em um componente de outro componente.
Você vincula uma propriedade no modelo de
o outro componente como vimos no arquivo component.html do menu,
e, em seguida, que estará disponível como entrada para este componente por
declarando uma variável e, em seguida, chamando decorador de entrada para isso.
Agora, com isso, vamos salvar as alterações em todos os arquivos que fizemos
e, em seguida, dar uma olhada na replicação angular.
Indo para o nosso navegador,
vemos que nesta replicação angular,
nada está sendo exibido aqui.
Porque agora, o prato selecionado,
nós não selecionamos nenhum dos pratos assim também o prato selecionado
é um objeto vazio lá.
Então, usamos o nGif no modelo para o detalhe do prato.
Então, dando uma olhada rápida no modelo de detalhes do prato,
você implementou isso como parte de sua tarefa.
Então, você deve ter usado o nGiF com o prato tanto para o código,
como para a lista MD lá.
Então, se você fizer isso,
então, quando o prato estiver atualmente desselecionado,
então nada será exibido na parte inferior.
Mas no momento em que eu clicar em qualquer um dos pratos,
então você imediatamente ver os detalhes do prato sendo exibido na parte inferior aqui.
Agora eu posso selecionar o segundo prato e, em seguida, imediatamente,
você vai notar que os detalhes do prato sendo exibido abaixo é alterado.
Então, sempre que eu clicar em qualquer um desses pratos,
os detalhes desse prato específico,
incluindo os comentários serão exibidos na parte inferior aqui.
Então, isso é exatamente o que queremos alcançar neste exercício específico.
Então, aqui, você viu o uso de ligação de dados, três tipos diferentes,
incluindo o manipulador de eventos e eventos,
e também você viu como podemos fazer uso do módulo de entrada para ser capaz
para recuperar informações em um componente vindo de outro componente.
Com isso, concluímos este exercício,
onde aprendemos a fazer uso de vários dados
recursos de ligação disponíveis no Angular para implementar nossa aplicação.
Este é um bom momento para você fazer um commit git com a ligação de dados de mensagem.