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。

我嘲笑了问题here。

事实证明，我的代码编写方式阻止了UI。我唯一想做的就是使用WebWorker。但是，有very little documentation and/or examples。另外，此article显示了如何在Angular 6（接近7）中使用WebWorkers，但似乎暗示我的WebWorker文件是用JavaScript编写的。是否有端到端的TypeScript Angular 7方法？

如何使用TypeScript在Angular 7中实现WebWorkers？

0 个答案: