Angular自定义StaticChild装饰器替代ViewChild跨组件失效问题

你写的简易包装版@StaticChild跨场景失效，核心是踩了Angular Ivy编译机制的规则：Angular 9及以上版本的视图查询逻辑不是纯运行时实现的，编译器在AOT编译阶段会静态扫描源码里的装饰器，只有被直接标记为原生@ViewChild等官方查询装饰器的字段，才会被纳入组件的视图查询元数据集合，编译器不会递归解析自定义装饰器内部嵌套调用的官方装饰器。
具体表现对应你遇到的现象：

• 组件内部使用时正常：是因为运行时你调用的ViewChild(selector, {static:true})确实会执行，给字段赋值了查询结果，所以组件内部方法直接读这个字段能拿到值；
• 跨组件通过getter访问、传入ngx-datatable时失效：是因为编译阶段Angular根本没识别到这个字段是一个ViewChild查询，没有给它生成对应的视图上下文绑定标记、也没有把它登记到组件的公开查询元数据里。当其他组件拿到这个字段值、或者ngx-datatable需要解析TemplateRef的声明上下文时，因为缺少元数据标记，就会出现引用找不到、上下文错乱的问题；
• 换回原生带{static:true}的@ViewChild就正常，就是因为原生装饰器能被编译器直接扫描识别，生成完整的查询逻辑和元数据。

import { ViewChild, ViewChildDecorator } from '@angular/core';

export const StaticChild: ViewChildDecorator = (selector, restOpts = {}) => {
  // 强制覆盖static为true，其余配置（比如read选项）和原生ViewChild行为完全一致
  return ViewChild(selector, { ...restOpts, static: true });
};

// 核心：给自定义装饰器打上Ivy编译器识别的官方装饰器ID标记
Object.defineProperty(StaticChild, '__NG_ELEMENT_ID__', {
  value: (ViewChild as any).__NG_ELEMENT_ID__
});

这个实现完全兼容Angular 13的Ivy编译模式，不管是组件内部使用、跨组件通过getter访问、还是传递TemplateRef给ngx-datatable这类第三方组件，行为和原生写@ViewChild(xxx, {static: true})完全一致。

• 如果你需要批量替换项目里的@ViewChild(xxx, {static: true})，直接全局替换装饰器名即可，不需要改其他参数，支持传入模板引用变量、组件类、指令类等所有原生@ViewChild支持的选择器，也支持read等额外配置项；
• 如果要做@ContentChild、@ViewChildren的static简写，按照相同逻辑实现即可，只需要替换对应官方装饰器、拷贝对应装饰器的__NG_ELEMENT_ID__值；
• 不要给自定义装饰器加额外的逻辑包裹（比如套一层普通function再返回装饰器），否则会导致编译器静态扫描时识别不到挂载的__NG_ELEMENT_ID__标记。

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