我有一个循环的项目,这是更新的每几秒钟。根据项的类型,将加载不同的组件。此更新会导致每个项目的空模板持续几秒钟。
列出HTML:
<div ngFor="let ledgerDeposit of deposits">
<ng-template #depositTarget></ng-template>
</div>
列出组件:
@ViewChildren('depositTarget', { read: ViewContainerRef }) depositTargets: QueryList<ViewContainerRef>;
async ionViewDidLoad() {
this.depositTargets.changes.subscribe(() => {
this.loadComponents();
});
await this.loadDeposits(false);
}
async loadDeposits(forceRefresh: boolean) {
this.deposits = await this.exchanges.getDeposits();
}
private loadComponents() {
this.depositTargets.toArray().forEach((viewContainerRef, i) => {
let deposit = this.deposits[i];
let exchange = this.exchanges.getExchange(deposit.exchange);
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(exchange.depositSingleComponentName);
let componentRef = viewContainerRef.createComponent(componentFactory);
componentRef.instance.deposit = this.deposits[i];
});
}
有没有办法防止闪烁?就像缓存组件一样,这样组件就不会在每次更新时重新创建?
闪烁的demo:
https://stackoverflow.com/questions/49085555
复制相似问题