加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

大型项目清单的Angular 2性能优化

发布时间:2020-12-17 17:07:11 所属栏目:安全 来源:网络整理
导读:假设我有一个显示项目列表的组件 export class ListComponent implements OnInit{public list:any;constructor(private _ls: ListService) {} ngOnInit() { this._ls.listLoad().subscribe((data) = { this.list = data['list']; }); } loadMore() { this._l
假设我有一个显示项目列表的组件

export class ListComponent implements OnInit{

public list:any;

constructor(private _ls: ListService) {}

    ngOnInit() {
            this._ls.listLoad().subscribe((data) => {
                this.list = data['list'];
            });
    }

    loadMore() {
            this._ls.listLoad(this.page).subscribe((data) => {
                this.list = this.list.concat(data['list']);
                this.page++;
            });
    }

}

我们有模板

<ul>
    <li *ngFor="let item of list; let index=index">
    {{ item.name}}
    </li>
</ul>
<a (click)="loadMore()">Load more</a>

我想知道,当我们单击Load More链接并从服务器获取新项并附加到列表时,Angular 2是否会重绘完整列表或者只是在DOM中附加新项?

如果它重绘完整列表,是否有任何方法只添加新添加的项目. ChangeDetectionStrategy.OnPush可以在这种情况下有所帮助吗?

在我的情况下,我最初显示20个项目,每次点击加载更多附加20个项目到列表.我希望当用户加载更多项目时,他们可能会在列表中列出1000到2000个项目.如果Angular重绘每个附加的完整列表,可能会导致性能问题.

@ ngrx / store能否带来一些性能优势?

解决方法

* ngFor应仅在保持现有原始状态的同时附加新项目.如果您在开头或中间插入新项目会导致项目被删除并重新添加而不是仅仅移动,则会出现一个已知问题.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读