Angular 面试题---基础

✅ Promise 和 Observable 的区别

Observable	Promise
可在一段时间内发出多个值	只能发出一个值且只发一次
懒加载：只有 subscribe 后才会被调用	非懒加载：then 或 catch 立即触发
可以通过 unsubscribe 取消	不能取消
提供丰富的操作符（如 map、forEach、retry、filter 等）	不提供操作符

---

✅ Constructor 和 ngOnInit 区别

特性	Constructor	ngOnInit
类型	JavaScript/TypeScript 类的构造函数	Angular 生命周期钩子
调用时机	组件或指令被实例化时	组件输入属性绑定完成后
典型用途	注入依赖、初始化类属性	访问和操作已绑定的输入属性、调用外部服务进行初始化
与 Angular 绑定的关系	不依赖 Angular 的数据绑定	在输入属性绑定完成之后调用，依赖 Angular 绑定机制

---

✅ Angular 生命周期

父子组件构造函数的调用顺序

ngAfterContentChecked

---

✅ 组件间通信方式

方式较多 单独列一篇文章

juejin.cn/post/749559…

---

✅ Angular 指令分类

• 组件型指令：有模板的 UI 区块，使用 @Component 装饰器。
• 结构型指令：改变 DOM 结构，如 *ngIf、*ngFor。
• 属性型指令：改变元素外观或行为，如 ngClass、ngStyle，也可以自定义。

---

✅ Provider 与 Service 的区别

• Service：封装业务逻辑和数据共享的类，使用依赖注入方式使用。
• Provider：定义服务的创建方式，是 Angular DI 系统中的配置项。
• 更详细的可看下面： juejin.cn/post/747591…

---

✅ 双向数据绑定的原理

Angular 使用 [(ngModel)] 实现双向绑定，底层是属性绑定和事件绑定的结合：

<input [(ngModel)]="username">
<!-- 等价于 -->
<input [value]="username" (input)="username = $event.target.value">

---

✅ @ViewChild vs @ContentChild

• @ViewChild：获取组件模板内的子元素。
• @ContentChild：获取投影进来的内容（ng-content 中传入的元素）。

---

✅ 模板驱动表单 vs 响应式表单

项目	模板驱动表单	响应式表单
模块	FormsModule	ReactiveFormsModule
定义方式	HTML 模板中使用指令	在组件中使用 FormGroup、FormControl
优点	简单易用，适合小型表单	灵活强大，适合复杂表单和动态控制
数据源	主要在模板	明确的模型结构

---

✅ DOM 与 BOM 的区别

DOM（文档对象模型）	BOM（浏览器对象模型）
操作网页内容	操作浏览器窗口
常用对象：document、element	常用对象：window、navigator、location、history、screen

---

✅ localStorage vs sessionStorage

属性	localStorage	sessionStorage
生命周期	永久（除非手动清除）	当前会话（关闭标签页即清除）
应用场景	持久化缓存	临时数据存储

常用方法：

localStorage.setItem('key', 'value');
localStorage.getItem('key');
localStorage.removeItem('key');
localStorage.clear();

---