Angular技术问题：直接将服务值赋值给类变量报错原因咨询

问题核心原因 #

TypeScript类的属性初始化逻辑执行时机早于构造函数。在你报错的写法里，value属性初始化时，Angular还没完成TestService的注入，this.testService此时是undefined，调用get()自然会抛出“Cannot read properties of undefined”错误。

而构造函数内赋值能正常运行，是因为Angular会在调用组件构造函数前完成依赖注入，构造函数执行时testService已经是有效的服务实例了。

为什么旧版本Angular没这个问题？ #

这和Angular版本的依赖注入机制、编译选项变化有关：

• 早期Angular版本可能对注入时机的处理更宽松，或者某些编译优化导致服务实例提前可用；
• Angular 14+引入了严格注入模式，同时对类初始化顺序的检查更严格，之前依赖未定义变量的“不规范写法”被明确禁止。

替代解决方案 #

除了构造函数内赋值，你还可以用以下两种更简洁的写法：

1. 使用inject()函数（Angular 14+支持）

直接在属性初始化时通过inject()获取服务实例，无需在构造函数中声明依赖：

import { Component, inject } from '@angular/core';
import { TestService } from './test.service';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
  providers: [TestService]
})
export class TestComponent {
  value: number = inject(TestService).get();
}

2. 在ngOnInit钩子中赋值

如果初始化逻辑涉及组件生命周期（比如需要等待视图初始化），可以把赋值逻辑放到ngOnInit中：

import { Component, OnInit } from '@angular/core';
import { TestService } from './test.service';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
  providers: [TestService]
})
export class TestComponent implements OnInit {
  value: number;

  constructor(private testService: TestService) {}

  ngOnInit(): void {
    this.value = this.testService.get();
  }
}

总结 #

永远遵循类初始化顺序：属性初始化先于构造函数执行，依赖注入的服务实例只有在构造函数执行时才会被赋值到类成员变量中。避免在属性初始化时依赖未注入的服务，改用构造函数、inject()函数或生命周期钩子处理。

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