Angular 高频面试题及实战答案.docxVIP

Angular高频面试题及实战答案

一、基础概念类

问：Angular和AngularJS的核心区别是什么？实际项目中你会怎么选？

答：最核心的区别是架构——AngularJS是基于MVC的JS框架，Angular是基于组件化的TS框架（完全重写，不是升级）。实际选的话，老项目维护才会用AngularJS，新项目肯定选Angular：一是TS带来的类型安全能减少线上bug，二是组件化更适合大型项目拆分维护，三是Angular内置了路由、表单、HTTP等全套方案，不用像AngularJS那样自己拼插件。另外Angular的AoT编译、Tree-Shaking这些优化，AngularJS根本没有。

问：什么是Angular模块（NgModule）？它的核心作用是什么？

答：NgModule就是用@NgModule装饰器标记的类，本质是组织应用代码的“容器”。核心作用有三个：一是声明哪些组件/指令/管道属于这个模块；二是导入其他模块的功能（比如BrowserModule提供浏览器运行环境，ReactiveFormsModule提供响应式表单）；三是导出本模块的公共组件，让其他模块能使用。还有根模块（AppModule）必须导入BrowserModule并在bootstrap里指定根组件，不然应用启动不了。

问：组件和指令的区别是什么？各自的使用场景？

答：组件是带模板的指令，这是最关键的区别——组件有template/templateUrl，指令没有，只能通过DOM操作增强现有元素。场景上：组件用来构建页面结构（比如HeaderComponent、ListComponent），是应用的“积木”；指令分两种：结构型指令（*ngIf、*ngFor）用来控制DOM元素的添加/删除，属性型指令（ngClass、自定义指令）用来修改元素的样式、行为（比如做一个highlight指令，鼠标悬浮时高亮文本）。

二、实战应用类

问：Angular中如何实现组件间通信？请举2-3个实际场景例子。

答：常用的有4种，按场景选：

父传子：用@Input()+模板绑定。比如父组件ParentComponent给子组件ChildComponent传用户信息：父模板写app-child[user]=currentUser/app-child，子组件用@Input()user:User;接收。

子传父：用@Output()+EventEmitter。比如子组件是表单，提交后通知父组件：子组件定义@Output()submitForm=newEventEmitterUser();，点击提交时this.submitForm.emit(formValue)，父模板用app-child(submitForm)=handleSubmit($event)/app-child接收。

跨组件（无直接关系）：用Service+Subject/BehaviorSubject。比如全局通知功能，创建NotificationService，里面定义privatenotification$=newBehaviorSubjectstring|null(null);，提供sendNotification(msg:string)方法（内部this.notification$.next(msg)）和getNotification()方法（返回this.notification$.asObservable()），需要接收通知的组件注入服务后订阅即可。

补充：如果组件层级深，也可以用ViewChild直接获取子组件实例（但耦合度高，尽量少用）。

问：Angular表单有哪两种？它们的区别是什么？实际项目中选哪种？

答：模板驱动表单和响应式表单，核心区别在“控制权”和“灵活性”：

模板驱动：基于模板，用ngModel绑定数据，逻辑写在模板里（比如required校验）。优点是简单，适合简单表单（比如登录表单，只有账号密码）；缺点是难维护，复杂校验、动态表单不好搞，单元测试也麻烦。

响应式表单：基于代码，用FormGroup/FormControl/FormArray管理表单状态，校验逻辑写在组件里。优点是灵活，支持动态添加表单字段（比如多选项表单，用户可以点击“添加选项”新增输入框）、自定义校验（比如密码强度校验），状态变化可订阅，单元测试方便；缺点是代码量稍多。

实际项目选响应式表单：大部分业务场景都是复杂表单（比如用户注册，有基本信息、地址、兴趣爱好，还需要动