要使用Angular 7的cdk-virtual-scroll-viewport实现虚拟滚动，你可以按照以下步骤进行操作：

1. 安装Angular CDK：

npm install @angular/cdk

2. 导入所需的模块和组件：

import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { Component, ViewChild } from '@angular/core';

3. 在组件中获取对虚拟滚动视口的引用：

@Component({
  // ...
})
export class YourComponent {
  @ViewChild(CdkVirtualScrollViewport)
  viewport: CdkVirtualScrollViewport;
  
  // ...
}

4. 在模板中使用虚拟滚动视口并绑定数据源：

  
{{item}}

5. 在组件中定义数据源：

@Component({
  // ...
})
export class YourComponent {
  items: string[] = [];

  constructor() {
    // 模拟数据源
    for (let i = 0; i < 1000; i++) {
      this.items.push(`Item ${i}`);
    }
  }
  // ...
}

6. 样式设置：

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

.example-item {
  height: 50px;
}

这样，你就可以实现Angular 7的cdk-virtual-scroll-viewport的虚拟滚动了。在上述示例中，我们使用了一个虚拟滚动视口来显示1000个项目，每个项目的高度为50px。