Estou tendo problemas com os componentes no Angular, eu tenho um componente que emite um evento quando seleciona um determinado item, e eu preciso usar ele 2 vezes na mesma pagina, porem o segundo componente assume o mesmo comportamento do primeiro, parece que são a mesma instancia.
<h1>Transferência</h1>
<div class="alert alert-danger" role="alert" *ngIf="erro">
{{erro}}
</div>
<form [formGroup]="form" autocomplete="off">
<div class="text-center">
<app-procura-conta (contaSelecionada)="setContaOrigem($event)"
textoBotao="Procurar conta origem"></app-procura-conta>
</div>
<div class="row">
<div class="col-md-6">
<app-input id="agencia" placeholder="Digite a agência de origem" label="Agência de origem"
formControlName="agencia"
[model]="form.get('agencia')"></app-input>
</div>
<div class="col-md-6">
<app-input id="conta" label="Conta de origem" placeholder="Digite o número da conta de origem"
formControlName="conta"
[model]="form.get('conta')"></app-input>
</div>
</div>
<div class="text-center">
<app-procura-conta (contaSelecionada)="setContaDestino($event)"
textoBotao="Procurar conta destino"></app-procura-conta>
</div>
<div class="row">
<div class="col-md-6">
<app-input id="agenciaDestino" placeholder="Digite a agência de destino" label="Agência de destino"
formControlName="agenciaFavorecido"
[model]="form.get('agenciaFavorecido')"></app-input>
</div>
<div class="col-md-6">
<app-input id="contaDestino" label="Conta de destino" placeholder="Digite o número da conta de destino"
formControlName="contaFavorecido"
[model]="form.get('contaFavorecido')"></app-input>
</div>
</div>
<div class="row">
<div class="col-md-4">
<app-input id="valor" placeholder="Digite o valor que deseja transferir" label="Valor" formControlName="valor"
[model]="form.get('valor')"></app-input>
</div>
</div>
<div class="text-center">
<button (click)="transferir()" class="btn btn-primary" [disabled]="form.invalid">Transferir</button>
</div>
</form>
O componente que eu falo é esse app-procura-conta
, o segundo eu peço para ele usar o método setContaDestino
, porem ele tá usando o setContaOrigem
do primeiro. Segue o código dele:
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
import {debounceTime, distinctUntilChanged, switchMap} from 'rxjs/operators';
import {ContaService} from '../conta.service';
import {ContaResponse} from '../../model/conta.model';
@Component({
selector: 'app-procura-conta',
templateUrl: './procura-conta.component.html',
styleUrls: ['./procura-conta.component.css']
})
export class ProcuraContaComponent implements OnInit {
form: FormGroup;
campoBusca: FormControl;
contas: ContaResponse[];
@Output()
contaSelecionada = new EventEmitter();
@Input()
textoBotao: string;
constructor(private fb: FormBuilder, private contaService: ContaService) {
}
ngOnInit() {
this.campoBusca = this.fb.control('');
this.form = this.fb.group({
termo: this.campoBusca
});
this.campoBusca.valueChanges.pipe(
debounceTime(500),
distinctUntilChanged(),
switchMap(termo => this.contaService.busca(termo))
).subscribe(contas => this.contas = contas);
}
seleciona(conta: ContaResponse) {
this.contaSelecionada.emit(conta);
}
}
Alguém sabe como resolver?