Angular16 CDK虚拟滚动中注入属性组件显示值异常求助

在Angular 16应用使用CDK虚拟滚动时，滚动列表内的ProductComponent子组件ProductNameComponent通过令牌注入获取父组件属性，滚动后显示异常，但@Input绑定正常，手动触发变更检测无效——核心原因是虚拟滚动的组件实例复用机制：虚拟滚动会缓存离开视口的组件实例，当这些实例重新进入视口时，构造函数中的令牌注入逻辑不会重新执行，导致子组件持有旧的父组件属性引用。

以下是具体解决方向：

1. 动态更新令牌的提供值 #

将令牌的提供逻辑改为依赖父组件的输入属性动态生成，确保父组件属性更新时，令牌注入的值同步更新。在ProductComponent的providers数组中配置：

import { Component, Input } from '@angular/core';
import { PRODUCT_DATA_TOKEN } from './product-name.component';
import { Product } from './product.model';

@Component({
  selector: 'app-product',
  template: `<app-product-name></app-product-name>`,
  providers: [
    {
      provide: PRODUCT_DATA_TOKEN,
      useFactory: (component: ProductComponent) => component.product,
      deps: [ProductComponent]
    }
  ]
})
export class ProductComponent {
  @Input() product!: Product;
}

这种方式下，ProductNameComponent每次访问令牌值时，都会获取父组件当前的product属性，而非构造时的旧值。

2. 结合虚拟滚动生命周期钩子刷新数据 #

利用虚拟滚动的组件复用生命周期，在组件重新进入视口时手动同步父组件属性：

• 在ProductNameComponent中注入ChangeDetectorRef、ElementRef和ScrollDispatcher，监听滚动事件判断组件是否进入视口，同步最新属性并触发变更检测：

import { Component, Inject, ChangeDetectorRef, ElementRef, OnInit } from '@angular/core';
import { PRODUCT_DATA_TOKEN } from './tokens';
import { Product } from './product.model';
import { ScrollDispatcher } from '@angular/cdk/scrolling';
import { ProductComponent } from './product.component';

@Component({
  selector: 'app-product-name',
  template: `<span>{{product.name}}</span>`
})
export class ProductNameComponent implements OnInit {
  constructor(
    @Inject(PRODUCT_DATA_TOKEN) private product: Product,
    private cdr: ChangeDetectorRef,
    private elementRef: ElementRef,
    private scrollDispatcher: ScrollDispatcher
  ) {}

  ngOnInit() {
    this.scrollDispatcher.scrolled().subscribe(() => {
      const parentProduct = (this.elementRef.nativeElement.parentElement.component as ProductComponent).product;
      if (parentProduct !== this.product) {
        this.product = parentProduct;
        this.cdr.markForCheck();
      }
    });
  }
}

3. 改用@Input绑定（推荐） #

@Input是Angular父子组件通信的标准方式，虚拟滚动会自动处理组件复用时的@Input属性变更检测，无需额外处理注入逻辑的兼容性问题。直接在ProductNameComponent中定义输入属性：

@Component({
  selector: 'app-product-name',
  template: `<span>{{product.name}}</span>`
})
export class ProductNameComponent {
  @Input() product!: Product;
}

在ProductComponent模板中传递属性：

<app-product-name [product]="product"></app-product-name>

4. 禁用组件缓存（不推荐） #

通过设置cdkVirtualFor的templateCacheSize="0"禁用组件实例缓存，每次滚动都会创建新组件实例，注入逻辑会重新执行。但此方式会大幅降低大数据列表的滚动性能，仅适合调试或小规模列表：

<cdk-virtual-scroll-viewport itemSize="60">
  <div *cdkVirtualFor="let product of products; trackBy: trackById; templateCacheSize: 0">
    <app-product [product]="product"></app-product>
  </div>
</cdk-virtual-scroll-viewport>

内容的提问来源于stack exchange，提问作者sfaulkner