Philip

Philip's blog

0%

angular-interview-questions

Posted on Edited on In
Symbols count in article: 1k Reading time ≈ 4 mins.

Angular Interview Questions

总结一些Angular的面试题，希望对大家有所帮助。

  1. 简单描述Angular框架的特点，可以对比其他框架，比如React、Vue等。
  2. Angular的生命周期钩子有哪些，分别在什么时候调用？详情
  3. Angular数据绑定方式有哪些？详情
  4. Angular指令是什么？有哪些种类？详情
  5. Angular View Encapsulation有哪些方式？详情
  6. :host和::ng-deep的作用是什么？详情
  7. Angular的依赖注入是如何实现的？详情
    1. Angular依赖注入有哪些Injector？
    2. 提供Provider的方式有哪些？
    3. 如果Service带参数，该如何为其提供Provider？ - 使用useFactory。- 唯有此法能传参数。
  8. Angular的路由是如何实现的？详情
  9. Angular的变更检测是如何实现的？Change Detection
    1. 基于zone.js的变更检测
    2. zoneless变更检测
    3. OnPush变更检测的原理是怎样的？如果有子组件呢？详情
    4. detectChanges和markForCheck有什么区别? [详情]（https://zdd.github.io/2024/12/16/angular-change-detection-markforcheck/）
    5. runOutsideAngular的作用是什么？详情
  10. Angular组件间通信有哪些方式？各有什么优缺点？详情
  11. Angular如何实现性能优化？
  12. Angular injection context有哪些？[详情]（https://zdd.github.io/2025/02/18/angular-di-injection-context/）
  13. Angular @Input, @Input
  14. Angular Form - 重点复习一下，比如如何自定义验证器，如何自定义表单控件等。

Angular新特性

  1. 什么是signal? 详情
  2. signal与OnPush的关系，对于使用了OnPush更新策略的组件，如果内部使用了signal，Angular会将signal视为该组件的一个依赖，当这个signal变化时，Angular会将组件标记为待更新（markForCheck）。
  3. Angular deferrable view, 详情
  4. Angular SSR - 这个要重点复习一下。

What is Angular?

Angular is a web framework which help developers to build fast and scalable web applications. It is developed and maintained by Google.

It’s a MVC(or MVVM) framework to build SPA (Single Page Application) using HTML, CSS and JavaScript/TypeScript.

Angular has a lot of features like:

  1. Two-way data binding
  2. Dependency Injection
  3. Routing
  4. Directives
  5. Pipes
  6. Services
  7. Forms
  8. HttpClient
  9. Animations
  10. SSR (Server Side Rendering)

Differences between Angular and AngularJS

AngularJS Angular
Version 1.x 2+
Language JavaScript TypeScript
Architecture Controller Components
Mobile Support No Yes(Ionic)
CLI No Yes
Lazy loading No Yes
SSR No Yes

What are directives in Angular?

Directives are classes that add additional behavior to elements in your Angular applications. Angular has many kinds of directives, including:

  • Component
  • Attribute Directives
    • NgClass
    • NgStyle
    • NgModel
  • Structural Directives
    • NgIf
    • NgFor
    • NgSwitch

Component vs Module

Component is where you write you binding code, and Module groups components. An app contains many modules, and a module contains many components.

1
2
3
4
5
6
app
├─ Login Module
│  ├─ Login Component
│  ├─ Register Component
│  ├─ Forgot Password Component
│  ├─ Reset Password Component

Before standalone component, Two components in different module can’t communicate with each other directly, they need to communicate by their enclosing module. See here for more details.

Angular and MVVM

Angular is a MVVM framework, it’s a bit different from MVC.

  • Model: Data types and Services
  • View: HTML template
  • ViewModel: Component

In MVVM pattern, Model and View doesn’t communicate directly. ViewModel is a mediator between Model and View, it’s a class that contains the business logic of the application. In Angular, ViewModel is a Component.

What’s signal in Angular?

What’s deferrable component?

Angular如何实现性能优化？

  1. 使用OnPush策略 - reduce change detection counts.
  2. 使用trackBy
  3. 使用lazy load components - 減少initial bundle size, decrease first screen loading time.
  4. 图片优化：https://angular.dev/tutorials/learn-angular/11-optimizing-images - increase images loading speed.
  5. 合并API call（特别是使用GraphQL时），減少API call次数。这项优化非Angular特有，但是在Angular中也是适用的。
  6. 减小bundle size - 使用tree shaking, code splitting, lazy loading等技术。也要分析哪些npm包体积过大，是否有替代品。

#工作中遇到的真实案例

ng-if问题

之前一个同事写了一个很大的组件，就是一个左侧边栏菜单，这个边栏要加载用户账号，有的用户有上千个账号，而这个边栏还有一个收起和展开的操作。测试人员发现，当用户的账号很多时，收起和展开就特别卡。调查发现，收起和展开是通过ng-if实现的，而ng-if在显示和隐藏时是要操作DOM将对应的组件重建或删除的。这个组件很大，所以导致了卡顿。解决方案是使用ng-show/ng-hide，这样就不会导致组件的重建和删除。

References:

  1. https://dev.to/renukapatil/angular-interview-questions-4i4k 3.