How to refactor my method by eliminating the setTimeOut that is controlling the life cycle?

Asked

Viewed 81 times

0

A profile is coming from a parent component:

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

But when it arrives at the child component, it is necessary to delay the consultation by 53ms. See:

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

That for me is a gambit, the use of setTimeOut to control the life cycle, so I wonder if you have any way to treat this refactoring for something more elegant, since the profile only propagates 53ms later.

javascript angular typescript
  • 4

    "it is necessary to delay the consultation" - why? how did you come to that conclusion?

  • I don’t know yet why... but the propagation time takes 54ms for the object instance to reach its destination.

2 answers

1

To use the data received by the component you must wait until the event afterViewInit, only from it the data will be set in your class, in ngOnInit will not yet be available because it comes before

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

ngAfterViewInit() {
  if (this.perfil) {
    this.findAllTelefonesByPessoa();
  }
}

  • Alive, in the component you need to add "Afterviewinit Implements" and its use is ngAfterViewInit() { }. And effectively, this is executed after the component is loaded, the elements are already available in the DOM. You have in this post more details, https://stackoverflow.com/questions/46162234/what-is-the-difference-between-ngafterviewinit-and-ngafterviewchecked.

  • Truth failed to prefix with the ng. But don’t need implement the interface AfterViewInit

  • Yes. The use of lifecycle angular interfaces is optional. They only help you as a Veloper. Technically, Typescript is converted to Javascript, with the transpile process, which has no interfaces. Simply call the Lifecycle Javascript methods if they exist. That’s why it makes no difference whether you use the interfaces or not.

  • However, you should use the interfaces for several reasons: i) It is clearer which Life Cycle events are actually used. In large classes with many methods, you quickly lose the overview. The use of interfaces allows you to quickly determine all the "life cicle" methods used in a single location - at the beginning of the class in Typescript. ii) The Typescript compiler warns if you do not implement the "life cicle" methods correctly, for example, if you forgot to implement the method, incorrectly typed the method name or the method was accidentally removed.

  • 1

    Before you comment on this, I started asking a question about this: https://answall.com/questions/429433/qual-a-vantagem-de-implementar-as-interfaces-dos-eventos-do-lifecyclo-do-ang

  • You got the answer...

  • I tried to do this before, but is that still at this point, the profile is still in the state of Undefined.

  • You pass this object asynchronously (for example, load an API into the parent component and then send it to the child)?

Show 3 more comments

0

If you need the method findAllTelefonesByPessoa is invoked after the profile property has some value, you can use a setter of this property received by @Input and invoke the method within the setter. If you needed to delay calling this method to expect some other property, check the other methods initTelefoneForm and initRedeSocialForm perform some asynchronous action.

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();
  }
}

Browser other questions tagged javascript angular typescript

You are not signed in. Login or sign up in order to post.