Angular 高频面试题及详细答案（实战向）

Angular高频面试题及详细答案（实战向）一、基础概念篇（初级必问）1、说说Angular与Vue、React的核心区别三者核心差异集中在框架定位、渲染机制、语法规范和工程化体系上，日常开发和面试中重点区分这几点：1）框架定位：Angular是完整的全家桶框架，内置路由、状态管理、表单校验、HTTP、依赖注入等全套能力，开箱即用，适合大型企业级项目；Vue、React属于轻量渐进式框架，核心只做视图渲染，路由、状态管理等需要搭配第三方库实现。2）渲染机制：Angular采用脏值检测响应数据变化，默认不依赖虚拟DOM；Vue、React基于虚拟DOM和diff算法更新视图。3）语法与规范：Angular强制使用TypeScript，语法严格、工程规范统一，模板、脚本、样式完全分离；Vue语法更灵活，支持OptionsAPI和CompositionAPI，上手成本低；React采用JSX语法，逻辑和视图写在一起。4）适用场景：Angular多用于大型后台管理、企业级系统，团队协作规范度高；Vue适合中小型项目、快速开发；React适合移动端、跨端、复杂交互项目。2、Angular中的NgModule作用是什么？核心组成有哪些？NgModule是Angular的模块容器，核心作用是整合、拆分、隔离项目功能模块，实现组件、指令、管道的统一注册和权限控制，同时支持模块懒加载，优化项目性能。核心组成共5个：1）declarations：声明当前模块的组件、指令、管道，只有声明后才能在模块内使用；2）imports：导入其他模块，比如BrowserModule、RouterModule、表单模块等；3）exports：导出当前模块的组件、指令、管道，供其他模块使用；4）providers：注册服务、拦截器、守卫等依赖，配置全局/模块级依赖注入；5）bootstrap：根模块专属，指定项目启动的根组件。3、组件中@Input、@Output的作用和使用场景这两个装饰器是Angular组件父子传值的核心API：1）@Input()：父组件向子组件传值。子组件通过该装饰器定义接收字段，父组件在子组件标签上绑定属性传参。支持简单数据传递，也可接收对象、数组，同时可配合setter监听参数变化。2）@Output()：子组件向父组件触发事件传值。通过EventEmitter定义事件，子组件调用emit()触发事件并传递参数，父组件通过绑定事件接收子组件的数据。补充：日常开发中，简单父子传值优先用这两个API，多层嵌套传值不推荐层层透传，改用服务或者状态管理。4、Angular数据绑定的几种方式一共四种常用绑定方式，覆盖所有视图数据更新场景：1）插值绑定{{}}：单向绑定，将变量数据渲染到页面文本，仅展示，不能修改数据源；2）属性绑定[]：单向绑定，给标签原生属性、组件自定义属性赋值，比如[src]、[disabled]、[inputValue]；3）事件绑定()：绑定页面点击、输入等原生事件，触发组件内方法，比如(click)、(input)；4）双向绑定[(ngModel)]：语法糖，结合属性绑定和事件绑定，实现视图和数据双向同步，主要用于表单输入框，需要引入FormsModule才能使用。二、核心原理篇（中级高频）1、详细说说Angular脏值检测机制脏值检测是Angular视图更新的核心机制，核心逻辑是对比数据新旧值，有差异就更新视图。1）触发时机：当页面发生异步行为时会自动触发，包括点击事件、输入事件、定时器、HTTP请求、路由跳转等异步操作。2）执行流程：Angular会遍历当前组件树的所有数据绑定，对比每一个绑定数据的旧值和新值，若发现值不一致，就更新对应视图，遍历完成后结束本次检测。3）机制特点：默认全域检测，只要触发检测，会遍历整个组件树，这也是复杂项目中Angular性能损耗的主要点；相比虚拟DOM，省去了DOM对比计算，但无效检测较多。4）优化方式：通过OnPush变更检测策略、手动控制脏检测、脱离NgZone等方式减少检测次数。2、ChangeDetectionStrategy变更检测策略的两种模式组件默认有两种变更检测策略，用于优化页面渲染性能：1）Default（默认策略）：只要全局触发脏值检测，当前组件无论数据是否变化，都会执行检测流程。适合简单组件，但大型项目冗余检测多，性能差。2）OnPush（按需检测）：组件只会在两种场景触发检测：一是组件输入属性（@Input）的引用地址发生变化；二是组件内部触发了原生事件或手动调用检测方法。实战技巧：使用OnPush时，必须遵循不可变数据原则，修改数组、对象必须返回新引用，直接修改原数据无法触发视图更新。3、NgZone的作用是什么？如何使用NgZone优化性能？NgZone是Angular对浏览器事件循环的封装，核心作用是捕获异步操作，自动触发脏值检测。日常开发中，部分第三方异步操作（如原生js定时器、第三方动画、WebSocket）不在NgZone监听范围内，数据变化后视图不会自动更新，需要手动处理。性能优化用法：1）runOutsideAngular：将不需要更新视图的异步逻辑放到Angular检测外执行，不会触发脏检测，减少性能消耗，比如页面滚动监听、定时日志打印；2）run：脱离NgZone的异步操作，数据修改完成后，通过run方法手动触发脏检测，更新视图。4、Angular依赖注入（DI）的原理和作用依赖注入是Angular的核心设计思想，简单说就是组件/服务不需要手动创建依赖实例，由框架统一创建、管理、注入。核心原理：框架维护依赖注入器树，根据提供者配置，在组件初始化时匹配对应的服务实例，自动注入到构造函数中。作用：1）解耦代码，组件只负责调用逻辑，不负责创建实例，降低耦合度；2）统一管理服务生命周期，支持单例、模块级、组件级服务；3）方便单元测试，可轻松模拟依赖服务，替换真实接口。服务作用域：根模块providers注册为全局单例；模块内注册为模块单例；组件内注册仅当前组件实例有效。三、路由与表单实战篇1、Angular路由懒加载的实现方式和优势路由懒加载是Angular项目打包优化的核心手段，核心是按需加载模块，初始打包只加载核心代码，访问对应路由才加载对应模块代码。实现方式：通过loadChildren配置路由，搭配import()动态导入语法，拆分模块代码。核心优势：1）减小首屏打包体积，提升首屏加载速度；2）代码拆分，各业务模块独立打包，维护性更高；3）避免冗余代码加载，节省浏览器资源。补充：实际开发中，所有业务子模块都必须开启懒加载，只有根模块、公共模块全局加载。2、路由守卫有哪些？各自使用场景Angular路由守卫用于控制路由跳转权限、拦截路由行为，常用5种，覆盖所有路由场景：1）CanActivate：进入路由前拦截，用于权限校验、登录判断，未登录/无权限则禁止跳转；2）CanActivateChild：子路由权限拦截，统一控制某一模块下所有子路由的访问权限；3）CanDeactivate：离开路由前拦截，常用场景：表单未保存提示、弹窗未关闭提示，防止误跳转丢失数据；4）Resolve：路由跳转前预先请求接口数据，数据加载完成后再渲染页面，避免页面空白、数据闪烁；5）CanLoad：懒加载模块拦截，控制模块是否允许加载，多用于权限精细化控制，无权限则不加载模块资源。3、模板表单与响应式表单的区别Angular提供两种表单开发方式，适用不同业务场景：1）模板驱动表单（模板表单）逻辑写在模板中，依赖ngModel双向绑定，表单校验、状态由模板控制，代码简洁、上手快。适合简单表单，比如登录、搜索、单一行数少的表单。缺点是复杂校验、动态表单、表单联动难以维护，逻辑分散。2）响应式表单（模型表单）逻辑写在ts文件中，通过FormGroup、FormControl、FormArray手动定义表单结构、校验规则、默认值，模板只做展示。适合复杂表单、动态增减表单项、多联动、自定义校验的场景，代码集中、可维护性高、支持异步校验，是企业项目主流用法。4、响应式表单常用校验方式和自定义校验1）内置校验：Validators提供必填、最大最小值、最大长度、正则匹配等基础校验；2）自定义同步校验：自定义校验函数，接收表单控件，返回错误对象，用于个性化规则校验，比如手机号、身份证格式校验；3）自定义异步校验：用于服务端校验，比如校验账号是否重复、验证码是否正确，返回Observable异步结果；补充：实际开发中，会统一封装全局校验规则，复用手机号、邮箱、密码等通用校验逻辑。四、HTTP与拦截器篇1、AngularHttpClient相比于原生XMLHttpRequest的优势1）基于Observable封装，支持异步订阅、取消请求、链式调用，适配RxJS数据流；2）内置JSON自动解析，无需手动转换响应数据；3）支持请求、响应拦截器，统一处理请求头、错误、loading状态；4）强类型支持，可定义接口返回类型，配合TS实现类型校验，减少报错；5）支持请求参数自动序列化，无需手动拼接参数。2、HTTP拦截器的作用及常用业务场景拦截器是全局统一处理所有HTTP请求和响应的中间层，无需在每个接口中重复写通用逻辑，统一收口。常用实战场景：1）请求拦截：统一添加token、请求超时时间、请求头、加密请求参数；2）响应拦截：统一处理接口成功回调、数据解构、状态码；3）错误拦截：统一捕获401、403、500等错误，实现未登录跳转、弹窗提示、错误日志上报；4）全局loading状态管理，所有请求加载中展示loading，请求结束关闭loading。五、性能优化与实战问题篇（高级面试）1、Angular项目常用的性能优化方案结合项目实战，核心优化分为5个维度：1）渲染优化：组件开启OnPush变更检测、遵循不可变数据、纯管道替代方法渲染，减少重复脏检测；2）打包优化：路由懒加载、组件懒加载、开启production生产打包、压缩代码、移除冗余依赖、使用gzip压缩；3）列表优化：长列表使用虚拟滚动（cdk-virtual-scroll），避免一次性渲染大量DOM，解决页面卡顿；4）异步优化：NgZone脱离检测执行无效异步、取消多余订阅、防止内存泄漏；5）资源优化：图片懒加载、静态资源CDN、去除未使用组件和模块。2、Angular常见内存泄漏场景及解决方案内存泄漏是项目上线后卡顿、崩溃的主要原因，高频场景和解决方式：1）订阅未取消：HTTP请求、定时器、RxJS订阅未取消，组件销毁后依然执行。解决方案：使用async管道自动取消、组件销毁时unsubscribe、使用takeUntil统一管理订阅；2）全局事件监听未移除：window滚动、resize、点击事件绑定后未销毁，持续占用内存。解决方案：ngOnDestroy中手动移除监听；3）定时器未清除：setInterval、setTimeout未清除，后台持续执行。解决方案：销毁组件时清除定时器；4）第三方插件实例未销毁：图表、富文本、弹窗插件实例残留。解决方案：组件销毁时调用插件销毁方法。3、async管道的优势async管道用于模板中直接解析Observable异步数据，是Angular推荐的异步数据渲染方式，核心优势：1）自动管理订阅：无需手动订阅、取消订阅，组件销毁时自动取消，彻底杜绝内存泄漏；2）配合OnPush策略生效：async管道会主动标记组件状态，触发OnPush组件视图更新；3）代码简洁，无需在ts中定义变量接收异步数据，减少冗余代码。六、工程化与版本特性篇1、Angular8/9/10+核心更新特性（面试高频）1）Ivy渲染引擎：9版本默认启用，替代旧的ViewEngine，打包体积更小、渲染速度更快、调试更便捷、支持tree-shaking优化；2）全局严格模式、TS版本升级、类型更严格