Preciso fazer uma comunicação entre dois componentes. A partir de uma seleção (Primeiro Component), eu envio o ID para o outro componente, no ngOnInit eu recebo o valor desse ID (Segundo Component), porém quando tento usar ele em outra função (concluirCadastro()), dá Indefinid. O que posso fazer? Como resolver a questão?
Código disponível no: https://stackblitz.com/edit/angular-7rhqrp
No HTML do Primeiro Component
<h4>Selecionar Cidade</h4>
<mat-form-field>
<mat-label>Cidade</mat-label>
<mat-select (selectionChange)="cidadeSelecionada($event.value)">
<mat-option *ngFor="let city of citys" [value]="city.Id">
{{city.NomeCity}}
</mat-option>
</mat-select>
</mat-form-field>
<a [routerLink]="['/ParentChild2']">Selecionar</a>
No Component.ts do Primeiro Component
static emitirIdCidade = new EventEmitter<string>();
citys: City[] = [
{Id: 0, NomeCity: 'Belo Horizonte'},
{Id: 1, NomeCity: 'Lavras'},
{Id: 2, NomeCity: 'Rio de Janeiro'}
];
cidadeSelecionada(event){
ParentChildComponent.emitirIdCidade.emit(event);
}
No HTML do Segundo Component
<button (click)="concluirCadastro()">Concluir Cadastro</button>
No Component.ts do Segundo Component
ngOnInit() {
ParentChildComponent.emitirIdCidade.subscribe(
id => console.log(id)
);
}
concluirCadastro() {
console.log("teste novamente - " + this.cidadeId);
}
Resultado Console.
0
teste novamente - undefined