Angular 13 继承类无法通过字符串引用访问ViewChild问题求助

问题原因 #

1. 首先纠正认知偏差：Angular的模板引用变量（如#inset）本身就属于编译时标记，不会出现在最终渲染的DOM中，这是正常编译逻辑，不是被额外清理，Angular9版本中该标记同样不会出现在最终DOM里，只是旧版本编译器兼容了继承场景下的基类查询逻辑。
2. 核心触发原因：Angular 10+版本的Ivy编译器要求，使用了@ViewChild、@Input等Angular特性装饰器的抽象基类，必须搭配@Directive()装饰器才能被编译器正确识别处理，你当前的BaseComponent仅使用了@Injectable()装饰，因此基类中定义的@ViewChild查询不会被执行，自然返回undefined。
3. 额外影响因素：Angular 13默认关闭了跨类继承的装饰器注入行为，也会加剧该问题的出现。

解决方案 #

方案1：基类添加@Directive()装饰（最推荐，无副作用） #

修改base-component.ts代码，给抽象基类新增@Directive()装饰器即可，不需要修改其他业务代码：

// base-component.ts
import { Directive, ViewChild, AfterViewInit } from '@angular/core';

@Directive() // 必须添加该行，让编译器识别基类的Angular装饰器逻辑
export abstract class BaseComponent implements AfterViewInit {       
    @ViewChild('inset') contentInsetView: any;

    ngAfterViewInit() {
        console.warn("AfterInit: ", this.contentInsetView);
    }
}

方案2：子类重写查询逻辑（临时兼容场景） #

如果不便修改基类代码，可直接在子类中重新声明一次@ViewChild查询，覆盖父类的对应属性：

// my-component.ts
import { ViewChild } from '@angular/core';
import { BaseComponent } from './base-component';

export class MyComponent extends BaseComponent {       
    public htmlClass = "dashboard-widget DASHBOARD";
    // 子类中重新定义查询，结果会自动赋值给该属性
    @ViewChild('inset') override contentInsetView: any;

    constructor() {
      super();
    }
}

方案3：全局开启继承兼容配置（多继承场景适用） #

如果项目中有大量基类继承的查询逻辑，可以在tsconfig.json中开启全局兼容配置，恢复旧版本的继承行为：

// tsconfig.json
{
  "angularCompilerOptions": {
    "inheritInjectionBehavior": true
  }
}

该配置仅在Angular 13+版本生效，开启后会产生少量的编译性能开销。

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