相关疑难解决方法(0)

我们最近将可滚动列表转换为 CDK Virtual Scroller。（带有 angular/cdk 7.3.7 的 Angular 7.2.12）

简而言之，似乎VirtualScrollViewport正在回收组件实例，而不仅仅是文档建议的模板。

StackBlitz 上的实时 MCVE（更新以反映 EDIT 1）。

编辑 1

一位同事提醒我，我们现在使用命名引用而不是ViewChildren()，如下所示：

HelloComponent（内*cdkVirtualFor）：

@Component({
  selector: 'hello',
  template: `<h1 [class.active]="active">Data Item {{item}} !</h1>`,
  styles: [`.active {background-color: red; color: white}`]
})
export class HelloComponent  {
  @Input() item: any;
  active: boolean = false;
  toggle = () => this.active = !this.active;
}

并在应用程序中实现它，例如：

<cdk-virtual-scroll-viewport itemSize="75">
  <ng-container *cdkVirtualFor="let item of data" templateCacheSize=0>
    <hello #hi [item]="item" (click)="clickByReference(hi)"></hello>
  </ng-container>
</cdk-virtual-scroll-viewport>

// Non-essentials hidden, …