Question

我正在将ng2组件加载到页面上。 ng2组件的最基本的“加载”指示符如下所示：

<my-component>Loading...</my-component>

但是，我被要求显示一个微调器图标，直到我的组件的默认搜索结果已经完全加载。所以我将以下检查放在my-component的父div中：

<div *ngIf="vm?.FirstResultsLoaded">
    <!-- my-component html template -->
</div>

但是，使用这种方法，嵌套在父页面上的选择器标记内的微调器会在命中ngOnInit（）时消失，但是当检索到基础数据集时，父页面上的选择器/组件占位符会变为空白2秒钟，处理并绑定到组件视图模型成员变量。有没有其他方法来处理这种情况？例如，是否有任何类型的事件监听器可以连线以支持这种情况？主要关注的是，只有在底层组件加载时，才需要在初始组件加载时只显示一个微调器。

Answer 1

好的，这个怎么样：您在子项中创建一个EventEmitter，让父母知道何时让子项可见：

父模板：

<div [hidden]="childLoading">
    <child-component [sameInput]="input"
                     (readyEventEmitter)="onChildReadyToDisplay($event)">
    </child-component>
</div>

parent.component.ts：

///
this.childLoading = true;

onChildReadyToDisplay(isReady){
   this.childLoading = !isReady;
}
///

child.component.ts：

readyEventEmitter = new EventEmitter<boolean>();
OnInit(){
  loadData()
}
loadData(){
   ///your logic here
   processData();
}
processData(){
  ... 
  //When data loaded and processed :
  this.readyEventEmitter.emit(true);
}

角度2+“组件加载......”场景

1 个答案: