componentes com EventEmitter e @Output em Angular

componentes angulares são os blocos fundamentais de construção da arquitetura. Uma vez que você tenha entendido a arquitetura de componentes, você pode construir uma imagem em sua cabeça sobre como montar sua interface com base na comunicação de dados.

neste post vamos mergulhar em componentes angulares e como usar o evento e Saídas, para que possamos transferir ou notificar qualquer componente pai que algo mudou, ou gostaríamos de alterá-lo. Isto é tipicamente feito através de” eventos”, daí o nosso” EventEmitter ” e é projetado em torno de um sistema uni-direcional de fluxo de dados que adota uma abordagem muito mais razoável para o desenvolvimento de aplicações.

vamos finalizar os princípios básicos da comunicação pai-filho e filho-pai introduzindo EventEmitter e @Output.

Série

1. Inicialização de seu primeiro Angular app
2. Criar o seu primeiro Angular do componente
3. a Passagem de dados Angulares componentes com @
4. Componente de eventos com EventEmitter e @Saída Angular

Introdução

Este tutorial irá cobrir stateless os eventos de um componente usando o EventEmitter API e @Output decorador. Estes permitem-nos emitir alterações ou quaisquer nomes de eventos personalizados a partir de um componente personalizado em Angular.

este post decorre do artigo anterior sobre a transmissão de dados em componentes angulares com @Input, por isso não se esqueça de ler isso primeiro!

Stateful (pai) component binding

Much like in the previous tutorial, where we setup an @Input decorator to accept an input binding, we can do the same and listen in the parent for when a value changes inside our child component.

para fazer isso, vamos voltar para o nosso componente pai que está rendendo a nossa contagem:

eu fiz algumas adições aqui:

• Alterado initialCount para myCount, já não estamos mais a definição de um “initialCount”, portanto, a contagem do estado serão gerenciados no pais, uma vez que a criança componente faz uma alteração
• Criado um personalizado change propriedade <counter> modelo, usando () evento sintaxe de vinculação, como aprendemos quando criamos o nosso primeiro componente isso significa algum tipo de evento (como um click quando usado em um nativo de Nó de elemento).
• Conectado a myCount propriedade do pai
• Adicionado um countChange() {} método para a classe, e passou-o para o (change) ouvinte de evento

🎉 o Download gratuito!

Go beyond Array ForEach. Obtenha confiança com métodos mais avançados como reduzir, encontrar, filtrar, todos, Alguns e mapear e compreender completamente como gerenciar estruturas de dados JavaScript.

• compreender completamente como gerir estruturas de dados JavaScript com operações imutáveis
• 31 pages of deep-dive syntax, real-world examples, tips and tricks
• Write cleaner and better-structured programming logic within 3 hours

✅ sucesso! Verifique o seu e-mail, aproveite.

como um bónus extra, também lhe enviaremos algumas guloseimas extra através de alguns e-mails extra.

isto configura o nosso fluxo de dados uni-direccional finalizado. Os dados fluem para baixo da classe AppComponent, para o”, o contador pode então mudar os valores-e uma vez que o valor mudou esperamos countChange() para ser chamado. Agora temos de ligar isto.

@Saída decorador

como o uso de Input, podemos importar Output e decorar um novo change propriedade dentro da nossa CounterComponent:

Isto irá configurar os metadados necessários para dizer Angular desta propriedade é ser tratado como um enlace de saída. No entanto, ele precisa sentar ao lado de algo chamado de EventEmitter.Esta é a parte interessante. Para ser capaz de usar o nosso Output, precisamos importar e vincular uma nova instância do EventEmitter para:

Usando o TypeScript ao máximo o que tinha fazer algo como isso para indicar o tipo de valor do evento, estamos emitindo, e o nosso change saída é do tipo EventEmitter. No nosso caso, estamos emitindo um tipo number:

Invocando o evento emissor

então o que está acontecendo aqui? Criamos uma propriedade change, e ligamos uma nova instância de EventEmitter a ela – o que se segue?

podemos simplesmente chamar o nosso this.change método, no entanto, porque faz referência a uma instância de EventEmitter, temos que chamar .emit() para emitir um evento para o pai:

Isto irá, em seguida, emitir uma mudança para o nosso (change) ouvinte nós instalação no pai, para que o nosso countChange($event) retorno de chamada será chamado, e os dados associados com o evento, será dada a nós através de $event propriedade.

atribuição Stateful callback

aqui está o que vamos precisar fazer, re-atribuir this.myCount com o event que é passado para trás. Explicarei por que abaixo:

isto cria um fluxo de dados uni-direcional puro. Os dados vêm de AppComponent, flui para o nosso contador, o contador faz uma mudança, e emite que muda de volta para o pai em nosso comando – através da configuração EventEmitter. Uma vez que tenhamos esses dados de volta, nós fundimos essas mudanças de volta em nosso componente pai (stateful).

a razão pela qual estamos a fazer isto é para demonstrar que Parent: {{ myCount }} actualiza ao mesmo tempo que o nosso Output informa o pai.

Bonus: custom property names

Much like we learned with @Input() and creating custom property names, we can also do the same with @Output().

vamos supor que nós altere o (change) ligação para (update):

podemos ligar o nosso nome da propriedade personalizada, preservando o interno @Output nome da propriedade:

Basicamente, estamos apenas dizendo Angular aqui para pesquisa update como a propriedade, para ser acoplada, e podemos continuar usando this.change internamente.

assim que você tem, o guia para usar saídas com EventEmitter nos componentes do Angular. Agora você entende o modelo, codificação feliz!

para aprender mais técnicas, melhores práticas e conhecimento especializado do mundo real, eu recomendaria muito verificar os meus cursos angulares-eles irão guiá – lo através de sua viagem para dominar o Angular ao máximo!