Eu não pude compreender, por que eu devo colocar o metodo abaixo na classe app.component.ts e não na classe nova-transferencia.component.ts??????
transferir($event){ console.log($event); }
grata,
Eu não pude compreender, por que eu devo colocar o metodo abaixo na classe app.component.ts e não na classe nova-transferencia.component.ts??????
transferir($event){ console.log($event); }
grata,
Olá? Algum monitor que possa me auxiliar?
Olá Elisangela, como vai? :)
Na verdade, você não precisa escolher entre um método ou outro.
O que acontece é que o professor criou dois métodos com o mesmo nome em dois componentes. Mas se tratam de métodos diferentes, ok?
O método transferir()
do componente de nova-transferência.ts
é responsável por emitir um evento
@Output() aoTransferir = new EventEmitter<any>()
Esse evento contém os valores passados para os atributos valor e destino
this.aoTransferir.emit(valorEmitir)
Esses valores foram guardados dentro da constante chamada valorEmitir
const valorEmitir = { valor: this.valor, destino: this.destino }
Código completo:
nova-transferencia.component.ts
export class NovaTransferenciaComponent {
@Output() aoTransferir = new EventEmitter<any>();
valor: number;
destino: number;
transferir() {
console.log('Solicitada nova transferência');
const valorEmitir = { valor: this.valor, destino: this.destino };
this.aoTransferir.emit(valorEmitir);
}
Esse evento, por sua vez, vai ser recebido no app.component.html
<app-nova-transferencia (aoTransferir)="transferir($event)"></app-nova-transferencia>
Já o método transferir()
do app.component.ts
vai receber como parâmetro o evento que foi propagado transferir($event)
e vai associá-lo à variável de transferência this.transferencia = $event
app.component.ts
export class AppComponent {
title = 'bytebank';
transferencia: any;
transferir($event) {
console.log($event);
this.transferencia = $event;
}
Dessa forma, ocorreu a comunicação entre os componentes AppComponent
e NovaTransferenciaComponent.
Espero ter ajudado, bons estudos!