Olá Habr! Apresento a você a tradução do artigo
"Entendendo @Input, @Output e EventEmitter in Angular" por foolishneo.
Saudações a todos que desejam acumular informações sobre os meandros da estrutura angular.
Hoje achei necessário estudar melhor as informações sobre a organização da interação entre os componentes Angular e começar a praticar a tradução de artigos de interesse para mim do inglês.
Espero que haja aqueles para quem a tradução do artigo do
Medium será útil.
Por muito tempo tive o desejo de começar a traduzir artigos úteis do inglês, decidi começar com um simples, não muito volumoso, mas possivelmente complementando o conhecimento existente do artigo. A sua atenção, senhores ...
Para quem é iniciante no Angular, os decoradores de
Entrada e
Saída podem ser embaraçosos, especialmente quando você está tentando descobrir o objetivo deles com exemplos de código. Neste artigo, tentarei explicá-los da maneira mais simples possível.
Ferramenta de troca de dados
Antes de tudo, a tarefa dos decoradores de
entrada e
saída é trocar dados entre os componentes. Eles são um mecanismo para receber / enviar dados de um componente para outro.
A entrada é usada para receber dados, enquanto a
saída é usada para enviá-los.
A saída envia dados, expondo-os como produtores de eventos, geralmente como objetos da classe
EventEmitter.Assim, quando você vê o código, à semelhança disso:
@Component({ selector: 'todo-item', ... }) export class TodoItemComponent { @Input() item @Output() onChange = new EventEmitter() }
ele quer dizer:
- Ei, espero que os dados sejam enviados para mim. Vou obtê-los e salvá-los como o valor da propriedade do item.
- A propósito, serei o motivo do envio de dados usando a propriedade onChange.
Digamos que você tenha um componente
TodoList que contenha um componente
TodoItem .
No modelo de componente
TodoLis t, você espera ver:
... <todo-item [item]="myTask" (onChange)="handleChange($event)" </todo-item> ...
o que isso significa:
- O componente TodoList coloca o valor dos dados em sua propriedade myTask e passa para o componente TodoItem
- Os dados transferidos do componente TodoItem serão recebidos e processados pela função handleChange () do componente TodoList
Teoria suficiente. Vejamos um exemplo.
@Input e Output em ação.
Preste atenção a
um exemplo.Aqui eu criei 2 componentes, o componente
hello , aninhado no componente
app . O componente
hello possui
entrada e
saída :
hello.component.ts @Component({ selector: 'hello', template: ` <h3 (click)="onClick.emit('Neo')"> ... </h3> ` }) export class HelloComponent { @Input() myFriend: string @Output() onClick = new EventEmitter() }
O componente
hello espera obter um valor de sequência e colocá-lo como o valor da propriedade
myFriend .
@Input() myFriend: string
Cada vez que você clica nele, a propriedade de envio de dados
onClick do decorador de
Saída transmitirá ao “mundo externo” uma string com o conteúdo de “Neo”.
<h3 (click)="onClick.emit('Neo')">
Abaixo está o código do componente do
aplicativo :
app.component.ts export class AppComponent { ng = 'Angular' myName = 'Neo' upCase(st:string): void { ... } } app.component.html <hello myFriend="{{ ng }}" (onClick)="upCase($event)"></hello> <h3>My name is {{ myName }}</h3>
Observe que o componente do
aplicativo usa a tag
hello component em seu modelo, que executa 2 ações:
- passa o valor da string 'Angular' para o componente hello usando a propriedade ng
- e recebe o valor enviado do componente hello e processa o valor recebido usando a função upCase ():
<hello myFriend="{{ ng }}" (onClick)="upCase($event)">
Você pode ver o aplicativo em ação
aqui.