Angular中inject注入写法对比、构造函数与ngOnInit订阅时机咨询

一、两种inject写法的区别 #

你给出的两段代码本质上只有风格差异，没有功能或运行逻辑上的区别：

// 写法1：类属性直接初始化
export class ExampleComponent {
    private service = inject(Dependency);            
}

// 写法2：构造函数内调用inject
export class ExampleComponent {
    private service: Dependency;
    
    constructor( ) { 
      this.service = inject(Dependency);            
    }

两种方式都是通过inject函数获取依赖实例，Angular的依赖注入系统会在组件实例化阶段完成依赖的解析和注入，最终效果完全一致。选择哪种写法仅取决于团队代码风格偏好。

二、构造函数中订阅Observable是否推荐？ #

不推荐在构造函数中进行订阅操作，原因如下：

• 构造函数的核心职责是完成类的基础初始化和依赖注入，订阅属于业务逻辑/组件初始化逻辑，放在这里违背单一职责原则。
• 组件实例化时（构造函数执行阶段），@Input属性还未完成赋值，若订阅逻辑依赖输入属性，会导致错误。
• 构造函数执行时机早于ngOnInit，此时组件的DOM还未初始化，若订阅回调中涉及DOM操作会引发问题。

正确的做法是将订阅逻辑放在ngOnInit中：

export class ExampleComponent {
    private subscription: Subscription;
    private service = inject(Dependency);

    ngOnInit() { 
      this.subscription = this.service.getAnObservable().subscribe(result => {
        // 处理结果
      });
    }

    // 记得在组件销毁时取消订阅，避免内存泄漏
    ngOnDestroy() {
      this.subscription?.unsubscribe();
    }
}

另外更推荐使用async管道自动管理订阅，无需手动取消：

// 组件类中
data$ = this.service.getAnObservable();

// 模板中
<div>{{ data$ | async }}</div>

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