Skip to main content
removeu 1 caractere do conteúdo
Fonte Link
Rebeca Nonato
  • 1,2mil
  • 12
  • 32

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 **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

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

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
Fonte Link
Rebeca Nonato
  • 1,2mil
  • 12
  • 32

Enviar Id via Componentes independentes a partir de um link e emiter, Angular 2 (7)?

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