需要帮助w /延迟加载mat-accordion内容

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了需要帮助w /延迟加载mat-accordion内容相关的知识,希望对你有一定的参考价值。

我正在使用Angular 5和mat-accordion来显示作者列表。每位作者都写过多本书和文章。作者姓名显示在面板标题中,面板内容显示所有书籍,文章等。

因为我想展示100多个作者,每个作者有50多个条目,我不想一次填充整个手风琴和内容。我希望发生的是,当用户点击作者时,它会启动查询数据库的服务,然后根据需要填充面板内容。如果面板关闭,则内容应保持不变,因此重新展开面板不会启动另一个数据库查询。

因此,当我访问该页面时,我会看到作者Alice,Bob和Eve。当点击Alice时,应用程序查询数据库,获取Alice的条目,呈现内容,然后手风琴扩展。当我点击Eve时,应用程序应关闭Alice的面板,查询数据库,获取Eve的条目,呈现内容,最后展开面板。

如果我再次单击Alice,则Eve的面板会关闭,但由于Alice的内容已经存在,因此没有数据库查询或渲染。它只是扩大了。文档说使用ng-template,但我不知道该怎么做,而且真的不知道怎么做,所以内容在面板关闭后仍然存在。我并不担心数据发生变化需要再次获取Alice的数据,以防万一发生变化。

有什么例子可以解决这个问题的最佳方法吗?

谢谢!

G. Tranter的回答是正确的,我走的是正确的道路。如果其他人最终在这个页面上,这就是我最终做的事情。

ngOnInit(){ 
    this.authorsRetrieved.subscribe( authors => {
        this.allAuthors = authors as Array;
        this.authorsRetrieved = new Array(
            Math.max.apply(Math, this.allTrainers.map(function(t){ return t.trainer_id; }))
        );
// as authors are added and deleted, the author_id won't equal the number of 
// authors, so get the highest id number, create an array that long
// then fill it with blanks so the keys have some value
            this.authorsRetrieved.fill([{}]);
        });

showAuthorsWorks(authorID: Number = -1){
    if(authorID > this.authorsRetrieved.length){
      const tempArray = new Array(authorID - this.authorsRetrieved.length + 1);
      tempArray.fill([{}]);
      this.authorsRetrieved = this.authorsRetrieved.concat(tempArray);
    }
// only make the network call if we have to
// because we filled the id array, we can't just use length
if(typeof(this.authorsRetrieved[authorID][0]['manuscript_id']) === 'undefined'){
  this.authorWorksService.getAuthorWorks(authorID).subscribe( works => {
    this.worksRetrieved.splice(authorID, 0, works as Array<any>);
  });
}

我添加了一个检查几乎不可能的情况,其中数组长度小于最大author_id。您必须创建一个由N个元素组成的空数组,然后填充该数组。如果不这样做,则空数组的长度为0,并且无法将数据推送到不存在的数组元素。即使在Chrome控制台上,它表示长度为N且元素在那里,只是空的。

再次感谢!

答案

如果您指的是与ng-template一起使用的MatExpansionPanelContent指令,那么所有这一切都会延迟加载内容,直到打开面板。它不知道它是否已被加载。因此,如果您对{{lazyContent}}等内容使用绑定表达式,则每次打开选项卡时都会对其进行评估。您需要自己管理内容缓存。一种简单的方法是通过吸气剂。

在您的组件中:

_lazyContent: string;
get lazyContent() {
    if (!this._lazyContent) {
        this._lazyContent = fetchContent();
    }
    return this._lazyContent;
}

加上你的html

<mat-expansion-panel>
    ...
    <ng-template matExpansionPanelContent>
        {{lazyContent}}
    </ng-template>
    ....
</mat-expansion-panel>

所以ng-template负责延迟加载,getter负责缓存内容。

以上是关于需要帮助w /延迟加载mat-accordion内容的主要内容,如果未能解决你的问题,请参考以下文章

延迟加载

如何延迟加载?

Python 帮助延迟加载大型数据集

什么是Hibernate中的延迟加载?

轮播内幻灯片的延迟加载内容(内容为oEmbeds/iframes)

React.lazy与Suspence实现延迟加载