Angular @ViewChildren不支持static参数的替代方案及优化建议

方案1：自定义批量静态查询装饰器（最适配你的场景） #

你之前自定义装饰器未调通大概率是没有处理Angular装饰器的元数据收集逻辑，下面是可直接运行的实现：

• 首先定义装饰器工厂函数：

import { ViewChild } from '@angular/core';
import type { Type } from '@angular/core';

// 装饰器入参：要查询的类，查询数量上限（可根据业务场景调整，默认10个覆盖绝大多数场景）
export function ViewChildrenStatic<T>(itemType: Type<T>, maxCount = 10) {
  return function (target: any, propertyKey: string) {
    const propNames: string[] = [];
    // 批量生成多个@ViewChild查询，全部开启static: true
    for (let i = 0; i < maxCount; i++) {
      const propName = `_${propertyKey}_${i}`;
      propNames.push(propName);
      ViewChild(itemType, { static: true, read: itemType, index: i })(target, propName);
    }
    // 给目标类加getter，自动合并所有非空的查询结果为数组
    Object.defineProperty(target, propertyKey, {
      get: function () {
        return propNames.map(name => this[name]).filter(Boolean) as T[];
      },
      enumerable: true,
      configurable: true
    });
  };
}

• 组件内使用方式和你预期的原生@ViewChildren几乎一致：

// 直接用自定义装饰器查询，foos在ngOnInit时就已经是完整的静态实例数组
@ViewChildrenStatic(Foo) foos!: Foo[];

该方案不需要修改模板，不需要硬编码每个实例，多组件复用只需要导入装饰器即可，唯一需要注意的是把maxCount调整到大于等于你业务中单组件最大的Foo实例数量即可。

方案2：DOM查询+注入器获取实例（适合不想自定义装饰器的场景） #

如果你的Foo组件/指令的宿主元素有统一的CSS选择器（比如带foo属性），可以直接在ngOnInit里手动查询：

import { Component, ElementRef, Injector, OnInit } from '@angular/core';

@Component({...})
export class YourComponent implements OnInit {
  foos: Foo[] = [];

  constructor(
    private el: ElementRef<HTMLElement>,
    private injector: Injector
  ) {}

  ngOnInit(): void {
    // 查询所有Foo的宿主元素
    const fooElements = this.el.nativeElement.querySelectorAll('[foo]');
    // 逐个从元素关联的注入器中获取Foo实例
    this.foos = Array.from(fooElements).map(el =>
      Injector.get(el as any, Foo)
    );
    // 此时可直接调用库函数
    this.foos.forEach(foo => onFooInit(foo));
  }

  ngAfterViewInit(): void {
    this.foos.forEach(foo => afterViewFooInit(foo));
  }
}

该方案不需要提前声明查询，动态适配任意数量的Foo实例，前提是Foo的宿主元素有可被CSS查询的标识。

跨组件复用优化思路 #

如果多个组件都需要这套逻辑，可以封装成混入类，把Foo的查询、初始化逻辑都封装进去，组件只需要继承即可：

// 定义混入基类
export function WithFooList<T extends new (...args: any[]) => any>(Base: T = class {} as T) {
  abstract class FooListHost extends Base implements OnInit, AfterViewInit {
    @ViewChildrenStatic(Foo) foos!: Foo[];

    ngOnInit(): void {
      super.ngOnInit?.();
      this.foos.forEach(foo => onFooInit(foo));
    }

    ngAfterViewInit(): void {
      super.ngAfterViewInit?.();
      this.foos.forEach(foo => afterViewFooInit(foo));
    }
  }
  return FooListHost;
}

// 业务组件使用
@Component({...})
export class YourComponent extends WithFooList() {
  // 只需要写组件自身业务逻辑，不需要重复编写Foo相关初始化代码
}

如果不同组件的Foo有字段差异，可以给混入类加泛型参数、或者传入配置项适配即可。

注意事项 #

• 上述两种方案仅适用于*没有被*ngIf、ngFor等结构指令包裹的静态Foo实例，和原有static: true的查询范围完全一致
• 如果存在动态渲染的Foo实例，只能在ngAfterViewInit中通过原生@ViewChildren的changes事件监听处理，不符合你调用库函数的前置要求

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