Как реализовать WebWorkers в Angular 7 с использованием TypeScript?

Question

У меня есть Array<any> в родительском компоненте, который является односторонней связью родитель-потомок с дочерним компонентом.Когда Array в родительском компоненте обновляется (увеличивается / уменьшается), дочерний компонент должен регистрировать такие изменения и обновляться соответствующим образом.Однако мой код не работает.

TypeScript моего родительского компонента выглядит следующим образом.

export class AppComponent {
 myList: Array<any>;

 constructor() {
  this.myList = new Array<any>();
 }

 buttonClicked() {
  let counter = 0;
  while (counter < 100) {
   //do something very long
   const result = doSomething();
   this.myList.push(result);
   counter += 1;
  }
 }
}

И родительский HTML выглядит следующим образом.

<div>
 <app-child-component [list]="myList">
 </app-child-component>
</div>

Мой дочерний компонент TypeScript выглядит следующим образом.

export class ChildComponent {
 @Input('list')
 list: Array<any>;
}

Мой дочерний компонент HTML выглядит следующим образом.

<h1>{{list.length}}</h1>
<div *ngFor="let obj of list">
 {{obj.toString()}}
</div>

Эта настройка кода «работает» только в том смысле, что последлительный процесс в родительском процессе закончен, я вижу, что связывание действительно имеет место.Однако я хочу, чтобы привязка или изменения происходили в дочернем компоненте по мере выполнения работы, и Array<any> обновляется / добавляется в родительский компонент.

Я немного искал в Интернете, но большинство примеров кода для более старых версий Angular.

Я смоделировал проблему здесь .

Оказывается, то, как написан мой код, блокирует пользовательский интерфейс.Единственное, о чем я могу думать, это использовать WebWorker.Однако очень мало документации и / или примеров .Кроме того, в этой статье показано, как использовать WebWorkers в Angular 6 (близкой к 7), но, похоже, подразумевается, что мой файл WebWorker будет написан на JavaScript.Существует ли сквозной подход TypeScript Angular 7?