Angular7 - 材料/CDK-虚拟滚动

这是 Angular 7 中添加的新功能之一，称为虚拟滚动。该功能被添加到CDK（组件开发工具包）中。虚拟滚动向用户显示可见的 dom 元素，当用户滚动时，将显示下一个列表。这提供了更快的体验，因为完整列表不会一次性加载，而是仅根据屏幕上的可见性加载。

为什么我们需要虚拟滚动模块？

假设您有一个 UI，其中有一个大列表，其中将所有数据加载在一起可能会产生性能问题。Angular 7 虚拟滚动的新功能负责加载用户可见的元素。当用户滚动时，将显示用户可见的下一个 dom 元素列表。这提供了更快的体验，并且滚动也非常流畅。

让我们将依赖项添加到我们的项目中 -

npm install @angular/cdk –save

我们已经完成了虚拟滚动模块的依赖项的安装。

我们将通过一个示例来更好地了解如何在项目中使用虚拟滚动模块。

我们首先将虚拟滚动模块添加到app.module.ts中，如下所示 -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

在 app.module.ts 中，我们导入了 ScrollDispatchModule 并将其添加到导入数组中，如上面的代码所示。

下一步是获取要在屏幕上显示的数据。我们将继续使用上一章中创建的服务。

我们将从 URL https://jsonplaceholder.typicode.com/photos获取数据，该 URL 包含大约 5000 张图像的数据。我们将从中获取数据并使用虚拟滚动模块显示给用户。

网址https://jsonplaceholder.typicode.com/photos中的详细信息如下 -

它是具有图像 url 和缩略图 url 的 json 数据。我们将向用户显示缩略图 URL。

以下是将获取数据的服务 -

myservice.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
   providedIn: 'root'
})
export class MyserviceService {
   private finaldata = [];
   private apiurl = "https://jsonplaceholder.typicode.com/photos";
   constructor(private http: HttpClient) { }
   getData() {
      return this.http.get(this.apiurl);
   }
}

我们将从 app.component.ts 调用该服务，如下所示 -

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   public albumdetails = [];
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.myservice.getData().subscribe((data) => {
         this.albumdetails = Array.from(Object.keys(data), k=>data[k]);
         console.log(this.albumdetails);
      });
   }
}

现在变量albumdetails拥有来自 api 的所有数据，总计数为 5000。

现在我们已经准备好显示数据了，让我们在 app.component.html 中工作来显示数据。

我们需要添加标签<cdk-virtual-scroll-viewport></cdk-virtual-scroll-viewport>才能使用虚拟滚动模块。需要将标签添加到我们想要显示数据的 .html 文件中。

这是 app.component.html 中<cdk-virtual-scroll-viewport>的工作原理。

<h3>Angular 7 - Virtual Scrolling</h3>
<cdk-virtual-scroll-viewport [itemSize] = "20">
   <table>
      <thead>
         <tr>
            <td>ID</td>
            <td>ThumbNail</td>
         </tr>
      </thead>
      <tbody>
         <tr *cdkVirtualFor = "let album of albumdetails">
            <td>{{album.id}}</td>
            <td>
               <img src = "{{album.thumbnailUrl}}" width = "100" height = "100"/>
            </td>
         </tr>
      </tbody>
   </table>
</cdk-virtual-scroll-viewport>

我们在屏幕上向用户显示 ID 和缩略图 url。到目前为止，我们主要使用 *ngFor，但在<cdk-virtual-scroll-viewport>内部，我们必须使用 *cdkVirtualFor 来循环数据。

我们正在循环访问 app.component.html 中填充的 albumdetails 变量。为虚拟标签分配了一个大小 [itemSize]="20"，它将根据虚拟滚动模块的高度显示项目数。

与虚拟滚动模块相关的CSS如下 -

table {
   width: 100%;
}
cdk-virtual-scroll-viewport {
   height: 500px;
}

虚拟滚动条的高度为 500px。适合该高度的图像将显示给用户。我们已经添加了必要的代码来查看虚拟滚动模块。

浏览器中虚拟滚动模块的输出如下 -

我们可以看到前 4 张图像显示给用户。我们指定的高度为 500px。表格显示滚动，当用户滚动时，将显示适合该高度的图像，如下所示 -

当用户滚动时加载所需的图像。这个功能在性能方面非常有用。起初，它不会加载所有 5000 张图像，而是当用户滚动时，调用并显示 url。