Блог

Мне нужна помощь в принятии решения о том, как выполнять код после рендеринга компонента в Angular 10.

Я обнаружил два метода, как это сделать, но у каждого есть какое-то беспокойство или беспокойство, и я хочу знать, с каким из них пойти или есть ли альтернатива:

Метод 1: проверено после просмотра

 class UserComponent implements OnInit, AfterViewChecked {
  ...

  users = [];
  doRenderCallback = false;

  ngAfterViewChecked(): void {
    if (this.doRenderCallback) {
      // Perform JQuery
      this.doRenderCallback = false;
    }
  }

  private addUser(user): void {
    this.users.push(user);
    this.doRenderCallback = true;
  }
}
  

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

Я бы устанавливал логический флаг всякий раз, когда добавляется новый пользователь, а затем в ngAfterViewChecked нем проверяется наличие флага, а затем выполняет некоторый заданный jQuery для вновь заполненного элемента HTML.

Однако это предполагает выполнение jQuery для последнего добавленного пользователя, поэтому, если addUser он вызывается несколько раз одновременно (например, загрузка существующих данных с сервера), он не работает.

Способ 2: setTimeout

 class UserComponent implements OnInit {
  ...

  users = [];

  private addUser(user): void {
    this.users.push(user);
    setTimeout(() => {
      // Perform JQuery
    });
  }
}
  

Использование setTimeout непосредственно после обновления свойства users более чистое, поскольку оно сохраняет код jQuery в той же функции и не требует свойства flag . Однако я не уверен, что это надежно, и, похоже, я не могу найти много ответов или документации в поддержку этого.

Может кто-нибудь, пожалуйста, дать мне совет?