Обновление DOM до и после тяжелых блокировок - PullRequest
Новая
       59

Обновление DOM до и после тяжелых блокировок

1 голос
/ 28 февраля 2020

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

Шаблон компонента: 

<div>
  <my-spinner *ngIf="myService.isLoading"></my-spinner>
</div>

Сервис 

@Injectable()
export class MyService {
    private isLoading = false;
    constructor() {}

    myFunction() {
        this.isLoading = true;
        this.calculateSomethingSuperHeavyThatTakes5seconds();
        this.isLoading = false;
    }
}

выполнение myFunction на самом деле не показывало бы счетчик.

Один из способов, который я исправил, заключался в переносе тяжелой функции с помощью setTimeout следующим образом: 

myFunction() {
    this.isLoading = true;

    setTimeout(() => {
        this.calculateSomethingSuperHeavyThatTakes5seconds();
        this.isLoading = false;
    });
}

И это работает, но это не чистое решение для меня. applicationRef.tick () в myFunction (), упаковка содержимого myFunction в вариации this.zone.run () или changeDeetctionRef.detectChanges () не устранила проблему.

...