Angular中构造函数内使用继承服务报错排查：Cannot read properties of undefined问题

你遇到的问题主要源于两个关键点：子类构造函数未调用父类构造函数传递依赖，以及可能存在的服务属性初始化时机问题。下面一步步拆解：

核心错误：子类未调用super()传递服务 #

在TypeScript（以及Angular）的类继承中，子类构造函数必须先调用super()，并且要把父类所需的依赖传递进去——否则父类的成员（比如componentService）根本不会被初始化，自然会出现Cannot read properties of undefined的错误。

你的ExtendedComponent完全没调用super()，这是第一个致命问题。

修正后的代码示例 #

1. 父类BaseComponent #

@Directive()
export class BaseComponent {
  constructor(public componentService: BaseService) {
    // 这里可以先做个判断，避免服务属性未初始化的情况
    if (this.componentService.foo) {
      console.log(this.componentService.foo.bar);
    } else {
      console.warn('注意：BaseService的foo属性尚未初始化');
    }
  }
}

2. 子类ExtendedComponent #

@Directive()
export class ExtendedComponent extends BaseComponent {
  constructor(public componentService: ExtendedService) {
    // 必须优先调用super，把当前的ExtendedService传递给父类
    super(componentService);
    
    // 现在可以安全访问子类服务的属性了
    console.log(this.componentService.foo.bar);
  }
}

额外注意：确保服务的foo属性在构造阶段完成初始化 #

你提到在ngOnInit中可以正常工作，说明foo可能不是在服务的构造函数里初始化的。要在构造函数中访问foo.bar，必须确保服务的foo属性在构造阶段就已经被赋值：

@Injectable({ providedIn: 'root' })
export class BaseService {
  // 直接在属性声明时初始化
  foo = { bar: '默认值' };

  constructor() {
    // 或者在构造函数内赋值
    // this.foo = { bar: '默认值' };
  }
}

export class ExtendedService extends BaseService {
  constructor() {
    super();
    // 可以在这里扩展或重写foo的属性
    this.foo.bar = '扩展后的值';
  }
}

为什么ngOnInit可以工作？ #

Angular的生命周期中，ngOnInit是在组件构造完成、所有依赖注入完成后才执行的。如果你的foo属性是通过异步操作（比如HTTP请求）初始化的，那构造函数执行时异步操作还没完成，自然拿不到值；而ngOnInit执行时，异步操作可能已经完成，所以能正常访问。但如果你的目标是在构造函数中实现，就必须保证foo是同步初始化的。

内容的提问来源于stack exchange，提问作者Raphaël Balet