Angular中继承类未注入ChangeDetectorRef却可用的原因探究

嘿，这个问题我刚看到的时候也愣了一下，其实核心是TypeScript的属性机制和Angular依赖注入的结合搞的“小魔术”，我来一步步给你掰明白：

1. TypeScript的private不是真·私有 #

你在父类里写的private cdr: ChangeDetectorRef，只是TypeScript在编译阶段帮你做的访问控制检查，编译成JavaScript之后，这个属性就是实例上的普通属性——没有任何私有保护。

而子类里的private cdr: ChangeDetectorRef，看起来是另一个私有属性，但因为JS本身没有私有属性的概念（除非你用#cdr这种真正的私有字段语法），子类构造函数里通过依赖注入拿到的cdr，会被直接挂载到组件实例上，和父类声明的那个cdr在JS层面是同一个属性。

说白了，父类里的this.cdr，其实访问的就是子类实例上被Angular注入的那个ChangeDetectorRef实例。

2. Angular的DI实例是挂在组件实例上的 #

当Angular创建MyComponent实例时，会自动把ChangeDetectorRef注入到构造函数里，而且因为你用了private修饰参数，TypeScript会自动帮你把这个参数赋值为组件实例的属性（也就是this.cdr）。

而父类的方法里的this，指向的是子类的组件实例，不是父类的单独实例——所以父类方法访问this.cdr时，自然就拿到了子类注入的那个实例。

3. 为啥父类的cdr没初始化却不报错？ #

父类里的private cdr: ChangeDetectorRef只是类型声明，并没有实际初始化（你没给它赋值），但子类已经通过DI给这个属性赋了值，所以父类访问的时候就有值了。要是没有子类的注入，父类的cdr就是undefined，肯定会直接报错。

做个反向验证：用真正的私有字段试试 #

如果你把父类的cdr改成JS原生的私有字段（用#）：

export class MySuperClass {
  #cdr: ChangeDetectorRef;
  constructor() {}
  triggerDetect() {
    this.#cdr.detectChanges(); // 这里会直接报错，因为#cdr从来没被赋值过
  }
}

这时候父类的#cdr是完全私有、和子类的cdr无关的属性，父类方法访问它就会因为未初始化而报错——这也能反过来证明前面的结论。

总结一下：这不是ChangeDetectorRef的特殊特性，也不是TypeScript继承的bug，而是TypeScript的private修饰符和Angular DI实例挂载逻辑共同作用的结果。

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