javascript - Worker.onmessage 后的 angular2 变化检测未按预期工作

Question

我在我的angular2应用中遇到了一个很有意思的，我在这里简化一下情况。

这是应用组件

export class AppComponent {

    tabs: any = [];

    viewModes = [
       { label: "列表查看"},
       { label: "树状图" },
    ];


   constructor(private changeRef: ChangeDetectorRef) {}

   addTab() {
      var worker = new Worker("worker.js");
      worker.postMessage("");
      worker.onmessage = (event) => {
      this.tabs.push({
         label: 'label'
      })
     this.changeRef.detectChanges();
    }
  }

  currentMode: any;
  selectViewMode(mode: any) {
      if (this.currentMode) {
         this.currentMode.selected = false;
      }
      mode.selected = true;
      this.currentMode = mode;
   }

 }

这是模板

    <div *ngFor="let tab of tabs">
        <ul>
           <li *ngFor="let item of viewModes">
                <a (click)="selectViewMode(item)"     [style.background]="item.selected ? '#f69c55' : ''"> {{item.label}} </a>
           </li>
        </ul>
     </div>

     <button (click)="addTab()">Add Tab</button>

我在 Worker 完成后将一个新标签推送到标签。而angular2不会在Worker onmessage回调后做变化检测，我必须手动触发变化检测。

但是之后添加的tab中的list的背景在点击后不会发生变化(回调函数被执行了，所以变化检测没有起作用)。

如果我再次点击“添加选项卡”按钮等其他操作，更改检测将起作用并按预期设置列表背景。

如果我不手动触发变更检测。按下选项卡后，执行其他操作(例如再次单击按钮)以触发更改检测。现在列表将显示，并且背景更改效果很好。

我知道关键是在 Worker 执行后手动调用变化检测，但我不知 Prop 体发生了什么，导致列表后台变化检测不起作用。

Answer 1

每次调用添加选项卡函数时，您都在调用一个新的 worker。

addTab() {
      var worker = new Worker("worker.js");

相反，将 worker on top 声明为该类的范围绑定(bind)变量并在函数中使用它。

 worker : any = new Worker("worker.js");
    addTab() {
      this.worker.postMessage("");
      this.worker.onmessage = (event) => {
      this.tabs.push({
         label: 'label'
      })