首先

这篇文章是2018年Angular今年日历的第16天的文章。

最新版本的Angular7已经发布，CDK新增了DragDropModule和ScrollingModule模块。通过引入这些模块，您可以使用拖放和虚拟滚动功能。
为了体验一下，我按照示例稍微进行了一些尝试。

在2018年Angular降临节日历的第8天，@swfz先生撰写了有关拖放的文章！在本文中，我将写关于尝试Virtual Scrolling的事项。

如果有认识的差异之处，请您可以指摘一下，非常感激。

首先将v7进行升级。

由于本地环境是v6，所以首先将其升级到v7。

在执行ng update @angular/cli @angular/core时，出现了“找不到package.json。你在一个Node项目中吗？”的错误提示，因此先使用ng new [任意的项目名称]创建了一个新的项目，然后切换到该文件夹中，再次执行ng update @angular/cli @angular/core。

已经更新为v7。

如果只需要对整个项目进行升级，并且开发环境完全可以使用v7，那么只需要运行npm install -g @angular/cli即可。

在完成上述步骤后，我尝试了 npm install -g @angular/cli，并确认在之前的项目目录以外，也成功升级到了版本7。接下来，我将使用版本7创建项目并继续进行。

创建新项目

创建一个新项目，名称为”virtual-scrolling-sample”。
没有启用路由，选择了scss作为CSS样式。

$ ng new virtual-scrolling-sample
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? SCSS   [ http://sass-lang.com  
 ]

试着安装CDK

在新建的项目下执行以下命令（参考）：
npm install –save @angular/cdk

参考样例，尝试加入虚拟滚动。

我想要在查看示例时尝试使用Virtual Scroll。请参考最简单的示例。
https://material.angular.io/cdk/scrolling/overview#creating-items-in-the-viewport

首先，在 src/app/app.module.ts 文件中导入 ScrollingModule。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ScrollingModule } from '@angular/cdk/scrolling';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ScrollingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

然后我们会修改src/app/app.component.ts文件。
像示例代码一样，我们添加了items = Array.from({ length: 100000 }).map((_, i) => `Item #${i}`);来准备数据。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  items = Array.from({ length: 100000 }).map((_, i) => `Item #${i}`);
}

我会从示例中复制HTML和CSS。

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{ item }}</div>
</cdk-virtual-scroll-viewport>

.example-viewport {
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.example-item {
  height: 50px;
}

搬动了

简单、爽快。

尝试使用上下文变量

* 在 cdkVirtualFor 中，支持以下上下文变量（详细信息请参考文档）。

我尝试创建了一个可以在模板中使用的方法，通过写成 “let even = even;” ，让偶数行和奇数行分别显示不同的图片。

<cdk-virtual-scroll-viewport itemSize="150" class="example-viewport">
  <div
    *cdkVirtualFor="let item of items; 
                    let even = even; 
                    let odd = odd"
                    class="example-item">
    <p>{{ item }}</p>
    <ng-container *ngIf="even">
      <img src="../assets/img/me.jpg" />
    </ng-container>
    <ng-container *ngIf="odd">
      <img src="../assets/img/nise.jpg" />
    </ng-container>
  </div>
</cdk-virtual-scroll-viewport>

对CSS进行一些微调。

.example-viewport {
  height: 500px;
  width: 200px;
  border: 1px solid black;
}

.example-item {
  height: 150px;
}

img {
  width: 100px;
}

总结

实际上之前从未接触过Angular Material，所以很高兴有机会体验一下。
尝试它非常简单！我还想试试其他功能。

明天的Angular Advent Calendar 2018 将由 @ynishimura0922 先生担任！