6
respostas

[ANGULAR] onChanges como funciona?

Olá tudo bem?

alguém poderia me explicar o porque que a minha propriedade do onChanges só é detectada na primeira mudança? na segunda ele nem passa pelo onChanges.

O fluxo é "verboso" porem o foco da discução seria o porque ele carrega apenas a primeira vez.

FLUXO:

Ao clicar no botão X do modal, eu emito um evento para o PAI

modal-custom.component.ts:

@Output() public stopVideoOutput = new EventEmitter<boolean>();

closeModal(){
    this.stopVideoOutput.emit(true);
 }

O pai escuta esse evento:

<app-modal-custom  (stopVideoOutput)="stopVideo($event)">

Recebe os dados, e envia para o youtube-api.component.ts

youtube-api.component.ts:

@Input() stopVideoProperty = false;

ngOnChanges(changes: SimpleChanges): void {

//ELE SÓ AQUI UMA UNICA VEZ
// NÃO IMPORTA QUANTAS VEZES EU CLICAR NOVAMENTE NO X DO MODAL
    if(changes.stopVideoProperty.currentValue && this.player != undefined){
      this.player.stopVideo();
      changes.stopVideoProperty.currentValue = false;
    }
  }
6 respostas

Boa tarde, Nícolas! Como vai?

Vc já fez um debug para verificar se realmente o ngOnChanges() é executado apenas na primeira vez? Coloque um console.log('ngOnChanges') fora do if e veja se realmente só ocorre uma impressão na primeira vez que o botão é clicado!

Eu acho que o que está acontecendo é que ao clicar a primeira vez no botão, o código executa as instruções dentro do if e, consequentemente faz changes.stopVideoProperty.currentValue = false! Daí, na segunda vez que vc clica no botão, como esse valor é falso o if não é executado!

Veja aí se é realmente isso que está ocorrendo! Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Opa Gabriel tudo bom?

sim ele executa 2 vezes, a primeira é a padrao quando o componente carrega, a segunda é quando ele muda o status dele.

porem quando eu mudo o status dele novamente clicando no botão, ele nem entra no ngOnChanges.

ja fiz os testes colocando dentro e fora do if, só cai no ngOnChanges apenas uma vez (fora a padrao q é quando a pagina é carregada)

Eu acho que o que está acontecendo é que ao clicar a primeira vez no botão, o código executa as instruções dentro do if e, consequentemente faz changes.stopVideoProperty.currentValue = false! Daí, na segunda vez que vc clica no botão, como esse valor é falso o if não é executado!`

Então, mas a questão é que ele só deve cair no if se for true, e pra deixar true, tem o x do modal, quando eu clico em fechar ele muda a propriedade pra true.

a questao é que quando eu clico em fechar 1 vez ele passa pelo ngOnChanges e pelo if, ai eu mudo o status pra false nessa primeira passada.

na segunda vez q clico no x do modal, ele nem entra no metodo ngOnChanges, e consequentemente nem no if.

tem alguma regra especifica pra ele fazer o call do ngOnChanges?

up .....

Opa, Nícolas!

O ngOnChanges() é executado sempre que um data bound é alterado! Exatamente como é dito na documentação do Angular. Seguem os links:

https://angular.io/api/core/OnChanges

https://angular.io/guide/lifecycle-hooks#onchanges

Outra coisa, vc poderia postar o código do método stopVideo() pra que eu possa dar uma olhada?

Opa Gabriel, desculpe a demora na resposta, infelizmente não vou ter esse código, eu dei uma olhada na doc do angular antes de vir até aqui, fiz como mostra lá e tudo mais..

mas eu estou achando que... pode ser 2 coisas.

pode ser os life cicles que eu ainda n estudei sobre todos.

ou.. pode ser que tenha que setar falso através de um data bound também, lembro que só estava setando true pelo data bound, false eu setava no proprio ts.

infelizmente não vou ter esse código, eu dei uma olhada na doc do angular antes de vir até aqui, fiz como mostra lá e tudo mais..

Dessa forma eu fico de mãos atadas sem poder te ajudar, Nícolas! Se for possível, veja se vc consegue reproduzir um cenário mais simples onde esse erro ocorre e compartilhe o código no github. Daí, mandando o link aqui eu posso dar uma olhada. Mas sem nada prático fica impossível saber o que está ocorrendo pra tentar te ajudar, infelizmente!

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

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