Angular 2 - 一个一个地加载动态组件答案

【问题标题】：Angular 2 - Load the dynamic components one by oneAngular 2 - 一个一个地加载动态组件
【发布时间】：2017-07-14 21:59:40
【问题描述】：

<div *ngFor="let header of headers">    
    <widget [header]="header" (loaded)="onLoaded($event)"></widget>
</div>

如何根据“onLoaded”发射一一绑定标头。基本上，我希望小部件在每次成功加载数据后一一加载（输出方法 onLoaded 发出布尔值）。

【问题讨论】：

标签： angular asynchronous lazy-loading ngfor

【解决方案1】：

这是一个很奇怪的要求，所以你可以这样开始

1) 创建空的新数组 forLoop: any[] = [];

2) 在显示 headers 值之前（可能在 ngonint() 中）将 headers 数组中的第一个元素添加到 forLoop 数组

   `forLoop.push(headers.Shift())`  // it will remove first element from the headers array and add into forLoop

3) 现在显示 forLoop 数组

<div *ngFor="let header of forLoop;trackBy: trackByFn">    
    <widget [header]="header" (loaded)="onLoaded($event)"></widget>
</div>

 trackByFn(index, item) {
    return index; // or item.id
  }

4) onLoaded 方法从头数组中删除第二个元素添加到forloop数组中

onLoaded (){

  if(headers.length >0){
   forLoop.push(headers.Shift())
  }
}

5) 继续这个过程直到 headers 数组为空

【讨论】：