┌─────────────┐ │ constructor │<--注入依赖、初始化简单变量 └─────┬───────┘ │ ▼ ┌─────────────┐ │ngOnInit()│<--初始化逻辑、访问 @Input()└─────┬───────┘ │ ▼ ┌─────────────┐ │ 数据绑定&│<--模板渲染、指令/管道生效 │ 视图生成 │ └─────┬───────┘ │ ▼ ┌─────────────┐ │ 用户操作 │<--点击、输入、选择事件 └─────┬───────┘ │ ▼ ┌─────────────┐ │ ngOnDestroy │<--清理资源、取消订阅 └─────────────┘在 Angular 中，这两个写法的区别在于 是否实现了生命周期接口 OnInit，以及它带来的作用。我们逐步分析：
1. 纯类写法
exportclassLocationTestTypeComponent{// 类的内容}这是最基本的 类声明。
组件依然可以工作，你可以定义属性、方法和装饰器（如 @Input()、@Output()）。
没有实现 OnInit 接口，所以即便你写了 ngOnInit() 方法，也只是普通方法，不受 Angular 生命周期管理。
举例：
exportclassLocationTestTypeComponent{ngOnInit(){console.log('ngOnInit called');}}虽然 ngOnInit 写了，但 Angular 不会强制调用它，因为类没有声明实现 OnInit 接口（虽然通常 Angular 会调用，只是 TypeScript 不会检查类型正确性）。
2. 实现 OnInit 接口
import{Component,OnInit}from'@angular/core';exportclassLocationTestTypeComponentimplementsOnInit{ngOnInit():void{console.log('ngOnInit called');}}implements OnInit 表示该组件承诺实现 OnInit 接口。
OnInit 接口定义了一个方法：
interfaceOnInit{ngOnInit():void;}好处：
类型检查：TypeScript 会检查你是否写了 ngOnInit() 方法，如果没写或方法签名错误，会报错。
规范化：明确告诉别人，这个组件有 ngOnInit 生命周期钩子。
生命周期安全：Angular 会在组件实例化后自动调用 ngOnInit()。
3. 总结区别
| 写法 | Angular 生命周期调用 | TypeScript 类型检查 | 适用场景 |
|---|---|---|---|
export class LocationTestTypeComponent | 可以有 ngOnInit，但 TypeScript 不强制检查 | 无 | 简单组件，没有 ngOnInit 逻辑或者不想严格类型检查 |
export class LocationTestTypeComponent implements OnInit | Angular 会自动调用 ngOnInit | TypeScript 会检查是否实现 ngOnInit | 推荐使用，规范、可维护、类型安全 |
建议：
如果你的组件有初始化逻辑（比如请求数据、设置默认值、初始化数组等），最好实现 OnInit，这样更清晰、更规范，也能避免忘记写 ngOnInit() 的情况。
4. constructor vs ngOnInit()
| 特性 | constructor | ngOnInit() |
|---|---|---|
| 什么时候执行 | 组件类实例化时（Angular 还没完成数据绑定） | 组件初始化完成后（Angular 已完成输入属性绑定） |
| 用途 | 注入依赖（services）、初始化变量 | 初始化数据、发起 HTTP 请求、操作输入属性 |
| 是否必须 | 不必须，但通常用于依赖注入 | 不必须，但推荐用于初始化逻辑 |
| 注意 | 不能访问@Input()属性 | 可以安全访问@Input()属性 |
总结：
constructor 只负责依赖注入和简单初始化，不依赖 Angular 数据绑定。
ngOnInit() 用于初始化业务逻辑，访问组件的输入属性或调用服务。
不必同时写，但通常会两者结合：constructor 注入服务，ngOnInit() 初始化数据。
5. Angular 组件生命周期概览
- constructor
组件实例化
注入服务或初始化简单变量
- ngOnChanges（可选）
- 当输入属性 @Input() 变化时触发
- ngOnInit
Angular 完成组件初始化
输入属性已绑定
适合发起请求或设置默认值
- 数据绑定 & 渲染
模板绑定变量
指令、管道生效
- 用户操作
点击、输入、选择等事件
更新组件状态
- ngDoCheck / ngAfterViewInit / ngAfterContentInit（高级可选）
检测变化
子组件视图或内容初始化完成
- ngOnDestroy
组件销毁前清理资源
取消订阅、清除定时器
