Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Por que o método transferir() foi colocado no AppComponent ?

Por que o método transferir() foi colocado no AppComponent ?

import { TransferenciaService } from './services/transferencia.service'; import { Component } from '@angular/core';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent { title = 'bytebank'; transferencias: any[] = [];

constructor(private service: TransferenciaService) {}

transferir($event) { this.service.adicionar($event).subscribe(x => console.log(x)); } }

3 respostas

Olá Jean, tudo bem?

No arquivo nova-transferencia.component.ts, o professor criou uma instância da classe EventEmitter, que é responsável por emitir e escutar eventos e está sendo usada com a diretiva @Output.

@Output() aoTransferir = new EventEmitter<any>();

Dessa forma, ao emitir um evento, através do método emit(), há a propagação desses valores:

transferir() {
    console.log('Solicitada nova transferência');
    const valorEmitir = {valor: this.valor, destino: this.destino};
    this.aoTransferir.emit(valorEmitir);
        this.limparCampos();
  }

Esses dados, por sua vez, podem ser acessados por outro componente, como nesse caso, estão sendo acessados pelo AppComponent, devido à injeção de dependência que foi realizada:

constructor(private service: TransferenciaService) {}

Para que o AppComponent pudesse enxergar esses dados, foram feitas duas alterações:

  • um método denominado transferir() foi criado (tem o mesmo nome do método existente em nova-transferencia.component.ts - talvez por isso a sua dúvida - mas poderia ter qualquer outro nome, ok?)
  • e no app.component.html foi criado um event binding para associar esse método criado ao @Output() aoTransferir e assim, fazer os dados serem renderizados na tela.

<app-nova-transferencia (aoTransferir)="transferir($event)"></app-nova-transferencia>

Espero ter ajudado, até mais!

Na verdade, queria saber o porquê a injeção de dependência não foi feita dentro do componente "NovaTransferenciaComponent", junto com o "subscribe". E tinha necessidade de ser dentro do "AppComponent"?

solução!

Olá Jean,

Talvez o intuito do professor tenha sido utilizar abordagens diferentes, mostrando uma forma inicial mais simples de comunicação entre os componentes, para depois refatorar o código e utilizar o conceito de injeção de dependências, que é algo mais avançado.

E não há a necessidade explícita da injeção de dependência ser utilizada dentro do AppComponent, respondendo a sua segunda pergunta.

Na verdade, o AppComponent é um componente de entrada criado durante a inicialização do projeto, que pode ficar "livre" de toda essa lógica do nosso sistema, por conta da modularização inerente ao Angular, passando essa responsabilidade para outros componentes. Você pode conferir essa prática nos cursos posteriores da formação Angular.

Bons estudos!