Comunicação entre componentes do Angular

Name: Comunicação entre componentes do Angular
Author: Michaela Ochnich

Este capítulo demonstrará diferentes formas de enviares informações entre componentes, a depender da relação entre si. Aprenderás a passar informações de pai para filho, de criança para pai, ou de ambos os lados entre dois componentes.

Preview the first lesson free — get full access to all 7 lessons.

Solicitar uma demonstração Entrar

Curso: sob demanda

Esta lição irá mostrar a você como usar a propriedade input para enviar informações de um pai para um componente filho. Então aqui, eu tenho um aplicativo inicial que foi gerado usando o Angular CLI. E primeiro, vou gerar um componente pai e um componente filho para passar informações entre eles. E aqui eu simplesmente pulei a geração do arquivo de teste e o arquivo CSS separado. E então, no modelo de componente de aplicativo raiz, Vou deletar todo o código inicial, e, em seguida, adicione esse componente pai. Agora que está configurado, Vou abrir o modelo pai e, em seguida, incorpore nesse componente filho. Então, agora isso, esse componente filho está no componente pai, Vou abrir a classe de componente filho, e então vou importar o decorador de entrada da biblioteca principal Angular. Portanto, as propriedades de entrada podem ser usadas para enviar informações de um componente pai para um componente filho, e mantém essas informações sincronizadas. A seguir, declararei uma propriedade de entrada na classe do componente filho. Portanto, o decorador de entrada é o que marca a mensagem como uma propriedade de entrada, e uma propriedade de entrada está ligada a uma propriedade no Dom. Nesse caso, ele será vinculado ao componente pai. Quando essa propriedade no Dom do pai é atualizada, O Angular irá atualizar esta propriedade de entrada na classe do componente filho também, que é o que mantém esses dados sincronizados. Então aqui eu tenho o conjunto de propriedades com um operador de atribuição definido, uma vez que esta propriedade vai receber seu valor inicial do pai. No entanto, você também pode definir um valor padrão para a propriedade como tal. Então aqui se este componente não foi inicializado de alguma forma sem a propriedade de entrada sendo associada no componente pai, então, esse valor de mensagem seria o padrão de boas-vindas. E então a seguir exibirei esta mensagem no modelo de componente filho. Agora que o componente filho está configurado para receber aquele valor de entrada, o pai precisa passar esse valor para o filho. Então, primeiro na classe do componente pai, Vou definir uma mensagem para passar. Então, no modelo pai, Vou vincular isso à propriedade de entrada dos componentes filhos. Então, aqui estou usando vinculação de propriedade, que é feito com os colchetes para ligar a variável de mensagem pai para a propriedade de entrada de mensagem que foi criado no componente filho. E então ver isso no navegador, você pode ver a mensagem que foi definida no componente pai está sendo passado e exibido no componente filho. Portanto, às vezes você pode querer se referir a esse valor de entrada por um nome diferente dentro da classe do componente filho. Nesses casos, você pode criar um alias para a propriedade de entrada. Então, voltando para a classe do componente filho, Vou renomear essa propriedade para mensagem pai. E então, no decorador de entrada, passe o nome da propriedade que o componente pai está vinculado a. Nesse caso, essa é a mensagem. E agora que o componente filho sabe esta propriedade de entrada como mensagem pai, o modelo deve ser atualizado. E então ver isso no navegador você pode ver que essa mensagem ainda está sendo passada de pai para filho. Então isso é tudo para esta lição sobre como usar propriedades de entrada para se comunicar do componente pai para o filho. E na próxima lição, você aprenderá como interceptar qualquer mudança de valor de entrada usando setters e getters.

Intermediário Fornecedor : Michaela Ochnich 7 lições · 36m em Árabe, Alemão, Inglês, Espanhol, Francês, Português, Chinese

Descrição do curso

Este capítulo demonstrar diferentes maneiras de enviares informações entre componentes, a depender do relacionamento entre eles. Aprenderás como passar informações de pai para filho, filho para pai ou de ambas as maneiras entre dois componentes. Também aprenderás a interceptar algumas destas alterações de dados e alterá-las, se necessário, antes de usá-las no componente.

O Que Você Vai Aprender

Enviar dados de um componente pai para um componente filho usando Input, Setters e Getters e OnChanges
Enviar dados de um componente filho para um componente pai usando Output e EventEmitter
Acessar um componente filho através do modelo ou classe do pai usando ViewChild e Variáveis de Referência
Comunicar bidirecionalmente entre dois componentes
Interceptar mudanças de dados e alterá-las antes de serem usadas no componente
Compartilhar dados entre componentes usando um Serviço Compartilhado

Principais Conclusões

A forma como você comunica entre componentes Angular depende da relação deles entre si.
Informações podem ser passadas de pai para filho, de filho para pai, ou nos dois sentidos entre dois componentes.
Algumas mudanças de dados podem ser interceptadas e alteradas antes de serem usadas no componente.
Um pai pode acessar um componente filho através do modelo ou classe do pai.
Um serviço compartilhado é uma abordagem para comunicar entre componentes.

Perguntas Frequentes

O que este curso abrange?

Este capítulo demonstra diferentes formas de enviar informações entre componentes Angular dependendo de sua relação, incluindo passar dados de pai para filho, de filho para pai ou bidirecionalmente entre dois componentes e interceptar mudanças de dados para alterá-las antes do uso.

O que vou aprender a fazer neste curso?

Você aprenderá como enviar dados de um componente filho para um componente pai, enviar dados de um componente pai para um componente filho, acessar um componente filho através do modelo ou classe do pai e comunicar bidirecionalmente entre dois componentes.

Quais tópicos ou técnicas são ensinados nas lições?

As lições cobrem Input, Setters e Getters, OnChanges, Output e EventEmitter, ViewChild, Serviço Compartilhado e Variáveis de Referência.

Quais habilidades este curso ajuda a construir?

Constrói habilidades em Angular Components, Communication Diagrams, Component Diagram, Component Libraries, Connected Components e HTML Components.

Posso aprender a modificar dados antes de um componente usá-los?

Sim. O curso ensina como interceptar algumas dessas mudanças de dados e alterá-las se necessário antes do uso no componente.