0

Um perfil esta vindo de um componente pai:

<app-telefone-form [perfil]="perfil"></app-telefone-form>

Mas, quando ele chega no componente filho, é preciso retardar a consulta em 53ms. Veja:

ngOnInit() {
    this.initTelefoneForm();
    this.initRedeSocialForm();
    setTimeout(() => {
      if (this.perfil) {
        this.findAllTelefonesByPessoa();
      }
    }, 54);
  }

Isso para mim é uma gambiarra, o uso do setTimeOut para controlar o ciclo de vida, logo, gostaria de saber se tem alguma forma de tratar isso refatorando para algo mais elegante, já que o perfil só propaga 53ms depois.

2
  • 4
    "é preciso retardar a consulta" - porquê? como chegaste a essa conclusão?
    – Sergio
    5/01/2020 às 17:03
  • Não sei ainda o motivo... mas o tempo de propagação demora 54ms para que a instância do objeto chegue ao destino. 5/01/2020 às 18:34

2 Respostas 2

1

Para usar os dados recebidos pelo componente deve esperar até o evento afterViewInit, só partir dele os dados estarão setados na sua classe, no ngOnInit ainda não estará disponível porque vem antes

ngOnInit() {
  this.initTelefoneForm();
  this.initRedeSocialForm();
}

ngAfterViewInit() {
  if (this.perfil) {
    this.findAllTelefonesByPessoa();
  }
}
8
  • Viva, no componente precisa de adicionar "implements AfterViewInit" e a sua utilização é ngAfterViewInit() { }. E efectivamente, este é executado após o componente estar carregado, já estão disponíveis os elementos na DOM. Tem neste post mais detalhes, stackoverflow.com/questions/46162234/…. 5/01/2020 às 19:09
  • Verdade faltou prefixar com o ng. Mas não precisa implementar a interface AfterViewInit
    – Costamilam
    5/01/2020 às 19:27
  • Sim. O uso das interfaces em angular do ciclo de vida é opcional. Eles apenas o ajudam como developer. Tecnicamente, o TypeScript é convertido para JavaScript, com o processo de transpile, que não possui interfaces. Basta chamar os métodos do JavaScript Lifecycle, se existirem. Essa é a razão pela qual não faz diferença se você usa as interfaces ou não. 5/01/2020 às 19:40
  • No entanto, você deve usar as interfaces por vários motivos: i) É mais claro quais eventos do Ciclo de Vida são realmente usados. Nas grandes classes com muitos métodos, você perde rapidamente a visão geral. O uso das interfaces permite determinar rapidamente todos os métodos de “life cicle” usados em um único local - no início da classe no TypeScript. ii) O compilador TypeScript avisa se você não implementar os métodos de “life cicle” corretamente, por exemplo, se você esqueceu de implementar o método, digitou incorretamente o nome do método ou o método foi removido acidentalmente. 5/01/2020 às 19:40
  • 1
    Antes de você comenta isso, comecei a fazer um a pergunta sobre isso: pt.stackoverflow.com/questions/429433/…
    – Costamilam
    5/01/2020 às 19:48
0

Se você precisa que o o método findAllTelefonesByPessoa seja invocado após a propriedade perfil ter algum valor, você pode usar um setter desta propriedade recebida por @Input e invocar o método dentro do setter. Se você precisou atrasar a chamada deste método para esperar alguma outra propriedade, verifique se os outros métodos initTelefoneForm e initRedeSocialForm realizam alguma ação assíncrona.

export class TelefoneFormComponent implements OnInit {

  private _perfil: any; // declare o tipo correto

  ngOnInit() {
    this.initTelefoneForm();
    this.initRedeSocialForm();
  }

  @Input()
  set perfil(value: any) {
    this._perfil = value;
    this.findAllTelefonesByPessoa();
  }
}

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 .