企业官网建设流程全解析

┌─────────────┐ │ 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. 总结区别

建议：
如果你的组件有初始化逻辑（比如请求数据、设置默认值、初始化数组等），最好实现 OnInit，这样更清晰、更规范，也能避免忘记写 ngOnInit() 的情况。

4. constructor vs ngOnInit()

总结：

• constructor 只负责依赖注入和简单初始化，不依赖 Angular 数据绑定。

• ngOnInit() 用于初始化业务逻辑，访问组件的输入属性或调用服务。

• 不必同时写，但通常会两者结合：constructor 注入服务，ngOnInit() 初始化数据。

5. Angular 组件生命周期概览

1. constructor

• 组件实例化

• 注入服务或初始化简单变量

2. ngOnChanges（可选）

• 当输入属性 @Input() 变化时触发

3. ngOnInit

• Angular 完成组件初始化

• 输入属性已绑定

• 适合发起请求或设置默认值

4. 数据绑定 & 渲染

• 模板绑定变量

• 指令、管道生效

5. 用户操作

• 点击、输入、选择等事件

• 更新组件状态

6. ngDoCheck / ngAfterViewInit / ngAfterContentInit（高级可选）

• 检测变化

• 子组件视图或内容初始化完成

7. ngOnDestroy

• 组件销毁前清理资源

• 取消订阅、清除定时器