[英]angular 2+ “component loading…” scenario
I'm loading an ng2 component onto a page. 我正在将ng2组件加载到页面上。 The most basic "loading" indicator for an ng2 component looks like this:
ng2组件的最基本的“正在加载”指示器如下所示:
<my-component>Loading...</my-component>
However, I've been asked to show a spinner icon until the default search results of my-component have been fully loaded. 但是,一直要求我显示微调器图标,直到完全加载my-component的默认搜索结果为止。 So I put the following check in the parent div of my-component:
所以我将以下检查放在my-component的父div中:
<div *ngIf="vm?.FirstResultsLoaded">
<!-- my-component html template -->
</div>
However, with this approach, the spinner nested within the selector tags on the parent page disappears when ngOnInit() gets hit but then the selector/component placeholder on the parent page goes blank for 2 seconds while the underlying dataset is retrieved, processed and bound to the component view model member variable. 但是,使用此方法时,当ngOnInit()被命中时,嵌套在父页面选择器标签中的微调框消失,但随后在父页面上的选择器/组件占位符变为空白2秒钟,同时检索,处理和绑定了基础数据集到组件视图模型成员变量。 Is there any other way to handle this scenario?
还有其他方法可以处理这种情况吗? For example, is there any type of event listener that I could wire up to support this scenario?
例如,是否可以连接任何类型的事件侦听器以支持此方案? The main concern is that a spinner needs to be displayed only once on initial component load, only while the underlying component is loading.
主要关注的是,微调器仅在初始组件加载时才需要显示一次,仅在基础组件加载时才显示一次。
Ok, what about this: You create an EventEmitter within the child to let the parent know when to make the child visible like so : 好的,这是怎么回事:您在子级中创建一个EventEmitter,让父级知道何时使子级可见,如下所示:
Parent template : 父模板:
<div [hidden]="childLoading">
<child-component [sameInput]="input"
(readyEventEmitter)="onChildReadyToDisplay($event)">
</child-component>
</div>
parent.component.ts : parent.component.ts:
///
this.childLoading = true;
onChildReadyToDisplay(isReady){
this.childLoading = !isReady;
}
///
child.component.ts : child.component.ts:
readyEventEmitter = new EventEmitter<boolean>();
OnInit(){
loadData()
}
loadData(){
///your logic here
processData();
}
processData(){
...
//When data loaded and processed :
this.readyEventEmitter.emit(true);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.