Angular 14组件代码为何未自动生成constructor()与ngOnInit()？

核心结论 #

constructor 和 ngOnInit 既没有被弃用，也没有被移至别处，只是Angular CLI的默认组件生成模板做了调整，不再自动生成空的构造函数和生命周期钩子方法。

为什么会有这个变化 #

旧版Angular CLI生成组件时默认添加空的constructor和ngOnInit，是为了给新手提供快速编写初始化逻辑的模板，但实际开发中很多场景下这些空方法属于冗余代码。Angular团队在后续CLI版本更新中（从Angular 12开始）优化了默认模板，只保留最基础的组件结构，减少不必要的代码生成。

关于constructor和ngOnInit的作用（新手必知） #

• constructor：这是TypeScript类的原生构造函数，Angular会在创建组件实例时调用它。主要用途是依赖注入（比如注入服务），或者执行类本身的初始化逻辑，不适合处理组件视图相关的初始化（比如操作DOM、基于输入属性的逻辑）。
• ngOnInit：这是Angular的核心生命周期钩子，会在组件初始化完成（输入属性已绑定、视图开始初始化）后触发。适合放置组件的业务初始化逻辑，比如发起数据请求、初始化组件内变量等。

如何手动添加 #

如果你的组件需要用到这些逻辑，可以手动补充：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'course-card',
  templateUrl: './course-card.component.html',
  styleUrls: ['./course-card.component.css']
})
export class CourseCardComponent implements OnInit {
  // 如需依赖注入，添加构造函数
  constructor() { }

  ngOnInit(): void {
    // 在这里编写你的初始化逻辑
  }
}

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