角度2“组件加载......”场景-Java 学习之路

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

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

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

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

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

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);
}

回复于 2024-04-20T11:04:09+08:00

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

1 回答

相关问题