Angular7：Materials/CDK-Virtual Scrolling

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

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

  假设您有一个用户界面，它有一个很大的列表，将所有数据加载在一起可能会有性能问题。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，并将其添加到imports数组中，如上面的代码所示。

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

  我们将从https://jsonplaceholder.typicode.com/photos获取数据，那里有大约5000张图片的数据。我们将从中获取数据，并使用虚拟滚动模块向用户显示。

  https://jsonplaceholder.typicode.com/photos的详情如下：

  json数据有图像url和缩略图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文件，我们希望在其中显示数据。

  这是<cdk-virtual-scroll-viewport>在app.component.html的代码。

<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和缩略图。到目前为止，我们主要使用*ngFor，但是在<cdk-virtual-scroll-viewport>中，我们必须使用*cdkVirtualFor来遍历数据。

  我们正在遍历app.component.html内部填充的albumdetails变量。虚拟标签[itemSize]="20" 设置一个数值，它将根据虚拟滚动模块的高度显示项目数。

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

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

  虚拟卷轴的高度为500像素。符合该高度的图像将显示给用户。我们完成了添加必要的代码来查看我们的虚拟滚动模块。

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

  我们可以看到前4幅图像显示给用户。我们已经指定了500像素的高度。表格显示滚动，当用户滚动时，符合该高度的图像将显示如下

  用户滚动时会加载所需的图像。这个特性在性能方面非常有用。一开始，它不会加载所有的5000张图片，相反，当用户滚动时，会调用并显示URL。