Angular面试题

面试题多着眼于框架原理、底层、概念解读,毕竟angular国内应用确实很少,大多用react。

  1. Angular 是什么?
    答:
    Angular 是由 Google 维护的一个开源前端框架,用于构建单页应用(SPA)。它使用 TypeScript 编写,提供组件化架构、依赖注入、响应式编程(RxJS)、模块化系统等特性。
  2. Angular 和 AngularJS 有什么区别?
    答:
    Angular(2+)是完全重写的框架,基于组件而非控制器。
    使用 TypeScript 而非 JavaScript。
    性能更好(如引入 Ivy 渲染引擎)。
    支持服务端渲染(SSR)、PWA、模块懒加载等现代 Web 特性。
    AngularJS(1.x)已停止维护。
  3. 什么是组件(Component)?
    答:
    组件是 Angular 应用的基本构建块,由 TypeScript 类(逻辑)、HTML 模板(视图)和可选的样式组成。通过装饰器 @Component 定义。
  4. 什么是模块(NgModule)?
    答:
    NgModule 用于组织相关组件、指令、管道和服务。每个 Angular 应用至少有一个根模块(AppModule),通过 @NgModule 装饰器配置 imports、declarations、providers 等。
  5. 组件间通信有哪些方式?
    答:
    父子通信:@Input()(父→子)、@Output() + EventEmitter(子→父)
    任意组件:使用服务 + RxJS Subject家族
    跨层级:@ViewChild / @ViewChildren(父访问子)、@ContentChild
  6. 什么是服务(Service)和依赖注入(DI)?
    答:
    服务:用于封装可复用的业务逻辑(如 HTTP 请求、数据处理)。
    依赖注入:Angular 的 DI 系统在运行时自动提供服务实例,通过构造函数注入,实现解耦和测试友好。
  7. Angular 中的生命周期钩子有哪些?
    答:
    常用钩子包括:
    ngOnChanges:输入属性变化时调用
    ngOnInit:组件初始化后调用(常用于数据获取)
    ngDoCheck:自定义变更检测
    ngAfterViewInit:视图初始化后
    ngOnDestroy:组件销毁前(用于取消订阅、清理资源)
  8. 变更检测(Change Detection)机制是什么?
    答:
    此题与“Angular的数据绑定原理”是一样的。
    Angular 默认使用“脏检查”策略(从根组件向下检查所有绑定值是否变化)。可通过 OnPush 策略优化性能(仅当输入引用变化或事件触发时检测)。
  9. RxJS 在 Angular 中的作用?
    答:
    RxJS 提供 Observable 模式,用于处理异步操作(如 HTTP 请求、表单验证、事件流)。Angular 广泛使用 Observable 实现响应式编程。
  10. 如何优化 Angular 应用性能?
    答:
    使用 OnPush 变更检测策略(纯视图组件)
    合理使用 trackBy 减少列表重绘
    懒加载模块
    避免在模板中使用复杂表达式或函数调用
    使用 async 管道自动管理订阅
    启用 AOT 编译和生产构建(ng build --prod)
  11. 什么是管道(Pipe)?内置管道有哪些?
    答:
    管道用于转换数据(如日期、货币、大小写)。
    内置管道:date、currency、uppercase、async、json 等。
    可创建自定义管道(使用 @Pipe 装饰器)。
  12. Angular CLI 的作用?
    答:
    Angular CLI 是官方命令行工具,用于:
    创建项目(ng new)
    生成组件/服务/模块(ng generate)
    运行开发服务器(ng serve)
    构建生产包(ng build)
    运行测试(ng test)
    升级Angular (ng upgrade)
  13. Ivy 渲染引擎是什么?
    答:
    Ivy 是 Angular 9+ 默认的编译和渲染引擎,特点包括:
    更小的包体积
    更快的编译速度
    更好的调试体验
    支持增量 DOM 更新
  14. 编译方式AOT,JIT的区别与应用
特性 JIT(Just-in-Time) AOT(Ahead-of-Time)
编译时机 在浏览器中运行时编译(用户打开页面时) 在构建阶段(ng build)就完成编译
是否需要编译器 需要将 Angular 编译器(约 1MB)打包进应用 不需要编译器,产物更小
首屏加载速度 较慢(需先下载编译器 + 编译模板) 更快(直接执行预编译好的代码)
错误检测 模板错误在运行时才暴露 模板错误在构建时就能发现
安全性 HTML 模板以字符串形式存在,有潜在 XSS 风险 模板被编译为 JS,减少注入风险
适用场景 开发环境(ng serve 默认使用 JIT) 生产环境(ng build --prod 默认使用 AOT)

自 Angular 9 起,默认启用 Ivy 编译器,且开发模式也默认使用 AOT(通过增量编译实现快速热更新),但传统概念上仍保留 JIT/AOT 的区分

  1. onPush策略是什么
    OnPush 是 Angular 中一种变更检测策略(Change Detection Strategy),与默认的变更检测策略(Default)有显著区别。
仅在以下情况触发:
  1. 输入属性(@Input())引用发生变化
  2. 组件内部事件(如按钮点击)
  3. 使用了 async 管道且 Observable 发出新值
  4. 手动调用 markForCheck()
    正常在angular项目中,默认创建的组件是默认变更检测策略,因为对于Observable订阅,需要默认支持。
    markForCheck比detectChange要更好,优先使用前者,实在需要强制刷新,如echarts则考虑后者。
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容