2
respostas

Está meio confuso

Desculpe, mas não está clara a dependência entre o componente nova-transferencia e o componente pai (app.component.ts). Onde isso é definido? Todo componente que eu criar na aplicação é automativamente ligado ao componente pai? Também não está clara a ordem de execução: quem passa os dados para quem? E por último: uma dúvida bem básica, cuja resposta acho que já sei, mas preciso confirmar: todo esse código roda dentro do browser do cliente, certo? Todos os browsers modernos são compatíveis com o typescript e o angular? Existe alguma máquina virtual que é baixada de forma transparente para o cliente antes de rodar o angular? Grato.

2 respostas

Olá Gerson, tudo bem?

O componente principal de uma aplicação Angular é o AppComponent, isso é declarado no AppModule, o módulo raiz da aplicação, onde a diretiva @NgModule recebe um objeto de metadados para declarar os componentes, diretivas e pipes que pertencem a esse conjunto, declarations, importar outros módulos que os componentes dependam, imports, passa servicos que os componentes precisam, providers, e informa o componente que vai ser carregado quando a aplicação for carregada, bootstrap, metadado que só é encontrado no módulo raiz.

@NgModule({
  declarations: [
    AppComponent,
    NovaTransferenciaComponent,
    ExtratoComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

O AppComponent por ser o componente principal da aplicação, todos dos componentes declarados no módulo serão filhos dele.

Os dados podem ser passados para outros componentes com o uso das diretivas @Input() ou @Output(). No caso do NovaTransferenciaComponent , com uso da diretiva @Output, os dados do formulário são emitidos por um evento aoTransferir()

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);

    this.limparCampos();
  }

  limparCampos(){ . . . }
}

e passado para o AppComponent por um método que tem como parâmetro.

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

O método transferir() vai adicionar os dados vindo do evento emitir para uma variável.

export class AppComponent {
  title = 'bytebank';
  transferencia: any;

  transferir($event) {
    console.log($event);
    this.transferencia = $event;
  }
}

Com isso o AppComponent consegue usar os dados como por exemplo para exibir em tela com interpolação.

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

<app-extrato></app-extrato>

<p>Valor: {{ transferencia?.valor }}</p>
<p>Destino: {{ transferencia?.destino }}</p>

E sobre sua dúvida de compatibilidade do angular com os browsers. O Angular pega todo seu código TypeScript e compila ele em JavaScript permitindo rodar em qualquer browser sem problemas.

Bons estudos, Gerson.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software