首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在循环中创建动态组件会导致闪烁

在循环中创建动态组件会导致闪烁
EN

Stack Overflow用户
提问于 2018-03-03 23:05:26
回答 1查看 552关注 0票数 0

我有一个循环的项目,这是更新的每几秒钟。根据项的类型,将加载不同的组件。此更新会导致每个项目的空模板持续几秒钟。

列出HTML:

代码语言:javascript
复制
<div ngFor="let ledgerDeposit of deposits">
    <ng-template #depositTarget></ng-template>
</div>

列出组件:

代码语言:javascript
复制
 @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:

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/49085555

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档