1

Tenho um componente filho hospedado no pai, da seguinte forma:

Componente pai:

@Component({
  selector: 'app-componente-pai',
  template: `
<p id="elemento">componente pai</p>
<app-componente-filho></app-componente-filho>
`
})
export class Pai{

  quantVezesAlterado: number = 0;

  alterandoParagrafo(){
    let elem = document.getElementById('elemento');
    elem.innerHtml = 'componente pai alterado ' + this.quantVezesAlterado + ' vezes';
  }
}

Componente filho:

@Component({
  selector: 'app-componente-filho',
  template: `
<a>chamar função do pai</a>
<div>
    <!-- outros elementos -->
</div>
`
})
export class filho{ }

E quero chamar a função alterandoParagrafo(), existente no componente pai, sempre que a âncora <a> for clicado (e apenas a âncora, sem afetar outros componentes). Como eu posso fazer isso?

Estou usando Angular 8.2.5

1
  • Não entendi qual a dificuldade, não é só colocar um evento de clique na tag app-componente-filho?
    – LeAndrade
    Commented 13/12/2019 às 0:10

1 Resposta 1

3

Você pode fazer isso utilizando o EventEmitter do Angular.

Adicione um event binding ao elemento de âncora:

filho.component.ts

@Component({
  selector: 'app-componente-filho',
  template: `<a (click)="onClick()">chamar função do pai</a>`
})
export class filho { 
  @Output() callParent = new EventEmitter<any>();

  onClick(){
    this.callParent.emit(null);
  }
}

E adicione o event binding de callParent(o evento que está sendo emitido pelo componente filho) no componente pai, passando como parâmetro a função que deseja executar.

pai.component.ts

@Component({
    selector: 'app-componente-pai',
    template: `
  <p id="elemento">componente pai</p>
  <app-componente-filho (callParent)="onCallParent($event)"></app-componente-filho>
  `
  })
  export class Pai{

    quantVezesAlterado: number = 0;

    alterandoParagrafo(){
      let elem = document.getElementById('elemento');
      elem.innerHTML = 'componente pai alterado ' + this.quantVezesAlterado + ' vezes';
    }

    onCallParent(){
      this.alterandoParagrafo();
      this.quantVezesAlterado++;
    }
  }

Para saber mais, leia a documentação do Angular

7
  • 1
    Sua resposta seria levando em consideração que só existe um único elemento dentro do componente filho que no caso seria a âncora. Neste caso em específico funciona, mas qualquer outro tipo de situação é ineficaz. Commented 13/12/2019 às 14:05
  • 1
    Foi como comentei, a pergunta não está clara. O meu exemplo foi exatamente baseado na pergunta, só tem um elemento a, então não precisa utilizar EventEmitter(), até porque, qual seria a razão de se utilizar um método de emitir e não emitir nada (null)?!
    – LeAndrade
    Commented 13/12/2019 às 14:14
  • 1
    Não vejo problemas em utilizar emit(null), sendo que é um exemplo presente na própria documentação do framework. Commented 13/12/2019 às 14:42
  • 3
    Ambas as soluções são funcionais, acredito que agora caiba ao criador da pergunta decidir qual usar. Sem estresse, cara! :) Commented 13/12/2019 às 14:45
  • 1
    Sem problemas Geovana, como vc é nova no site, aqui as perguntas para serem respondidas tem que ser bem completas, com todos os detalhes possíveis, para que a resposta não cause mais confusão do que esclarecimentos tanto para quem realizou a pergunta, quanto para pessoas que possuam a mesma dúvida. Não estou estressado não :) Até pq hj é sexta-feira!
    – LeAndrade
    Commented 13/12/2019 às 15:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .