我最常问的 Angular 面试问题

2025-06-07

我最常问的 Angular 面试问题

本文总结了我会问应聘者以及我在面试中经常被问到的 Angular 面试问题列表。

目录

1. 什么是 Angular？Angular 和 Vue.js / React 有什么区别？

Angular是一个应用程序设计框架和开发平台，用于创建高效且复杂的单页应用程序。Angular 完全基于 TypeScript 构建，并将其作为主要语言。作为一个框架，它拥有许多实用的内置功能，例如路由、表单、HTTP 客户端、国际化 (i18n)、动画等等。

Vue.js和React不是应用程序框架，而是用于构建用户界面的 JavaScript 库。

2. Angular 有什么新功能？

查看Angular 博客以获取最新发行说明，例如Angular 11 发行版。

3. Angular 的主要概念是什么？

  • 组件：Angular 应用程序的基本构建块，用于控制 HTML 视图。
  • 模块：Angular 模块包含基本构建块，如组件、服务、指令等。使用模块，您可以将应用程序拆分为逻辑部分，每个部分执行单个任务，称为“模块”。
  • 模板：模板代表 Angular 应用程序的视图。
  • 服务：服务用于创建可在整个应用程序内共享的组件。
  • 元数据：元数据用于向 Angular 类添加更多数据。

Angular 架构

4.什么是依赖注入？

依赖注入 (DI) 是一种重要的设计模式，类不会自行创建依赖项，而是从外部源请求依赖项。依赖项是类执行其功能所需的服务或对象。Angular 使用其自身的 DI 框架来解析依赖项。DI 框架会在类实例化时向其提供已声明的依赖项。

5.什么是可观察对象？

Angular 严重依赖RxJS，这是一个使用可观察对象 (Observable) 以函数式、响应式风格编写异步和基于回调的代码的库。RxJS 引入了 Observables，这是一种全新的 JavaScript 推送系统，其中的 Observable 是多个值的生产者，并将它们“推送”给观察者（消费者）。

6.Promise 和 Observable 有什么区别？

可观察的 承诺
它们可以在需要结果时运行，因为它们直到订阅后才开始 创建后立即执行
随着时间的推移提供多种价值 仅提供一个值
使用 Subscribe 方法进行错误处理，使错误处理集中化、可预测化 将错误推送到子承诺
提供链接和订阅来处理复杂的应用程序 仅使用 .then() 子句

7. 你能解释一下 Angular 中组件通信的各种方式吗？

  1. @Input()使用和指令在父组件和一个或多个子组件之间共享数据@Output()。
  2. 使用 Angular 服务共享数据
  3. 使用状态管理，例如NgRx
  4. 读取和写入数据到本地存储
  5. 通过 URL 参数传递数据

8.如何将数据绑定到模板？

  • 属性绑定：Angular 中的属性绑定可帮助您设置 HTML 元素或指令的属性值
<img [src]="itemImageUrl">
Enter fullscreen mode Exit fullscreen mode
  • 事件绑定：事件绑定允许您监听和响应用户操作，例如击键、鼠标移动、点击和触摸。
<button (click)="onSave()">Save</button>
Enter fullscreen mode Exit fullscreen mode
  • 双向绑定：双向绑定为应用程序中的组件提供了一种共享数据的方式。使用双向绑定可以在父组件和子组件之间同时监听事件并更新值。
<app-sizer [(size)]="fontSizePx"></app-sizer>
Enter fullscreen mode Exit fullscreen mode

9.你对服务是如何理解的？

服务是一个广泛的类别，涵盖应用所需的任何价值、功能或特性。服务通常是一个用途明确、范围狭窄的类。它应该执行特定任务，并且出色地完成任务。

Angular 组件应该专注于呈现数据并提升用户体验。它应该在应用逻辑（数据模型）和视图（由模板渲染）之间起到中介作用。

Angular 服务帮助我们分离与视图无关的功能，以保持组件类的精简和高效。

您如何提供服务？

对于任何要使用的服务，您必须注册至少一个提供商。服务可以提供给特定的模块或组件，也可以在应用程序的任何位置提供。

在根级别提供

@Injectable({
 providedIn: 'root',
})
Enter fullscreen mode Exit fullscreen mode

如果在根级别提供服务，Angular 会创建一个单一的共享实例。此共享实例会被注入到任何需要它的类中。通过使用@Injectable()元数据，Angular 可以从编译后的应用中移除未使用的服务。

提供特定的 NgModule

如果该 NgModule 中的所有组件需要，则向特定的 NgModule 注册提供程序将向它们返回相同的服务实例。

@NgModule({
  providers: [
  BackendService,
  Logger
 ],
 ...
})
Enter fullscreen mode Exit fullscreen mode

在组件级别提供

如果在组件级别注册提供程序，则会为组件的每个新实例生成一个新的服务实例。

@Component({
  selector: 'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers: [HeroService]
})
Enter fullscreen mode Exit fullscreen mode

10. 你对指令是如何理解的？

指令会向现有的 DOM 元素或组件实例添加行为。组件和指令之间的基本区别在于，组件具有模板，而属性型指令或结构型指令没有模板，并且模板中的每个元素只能实例化一个组件。

我们可以区分三种类型的指令：

  • 组件：这些指令有一个模板。
  • 结构指令：这些指令通过添加和删除 DOM 元素来改变 DOM 布局。
  • 属性指令：这些指令改变元素、组件或其他指令的外观或行为。

11. JIT 与 AOT

Angular 提供了两种编译应用的方式。由于浏览器无法理解 Angular 模板和组件，因此需要编译步骤，以便将 HTML 和 TypeScript 代码转换为高效的 JavaScript 代码。

运行ng serve或ng buildCLI 命令时，编译类型（JIT 或 AOT）取决于aot中指定的构建配置属性值angular.json。默认情况下，aot对于新的 CLI 应用， 设置为 true。

准时制（JIT）

JIT 在运行时在浏览器中编译你的应用。在 Angular 8 之前，这都是默认设置。

提前（AOT）

AOT 在构建时编译你的应用。这是自 Angular 9 以来的默认设置。

AOT 有哪些优势？

  • 由于浏览器下载了应用程序的预编译版本，因此无需编译应用程序即可呈现应用程序。
  • 外部 CSS 样式表和 HTML 模板包含在应用程序 JavaScript 代码中。这样可以节省大量的 AJAX 请求。
  • 无需下载 Angular 编译器，从而减少了应用程序负载。
  • 可以在构建步骤本身期间检测并报告模板绑定错误
  • 由于 HTML 模板和组件被编译成 JavaScript，因此不会发生注入攻击。

12.你对延迟加载是如何理解的？

默认情况下，NgModule 是主动加载的，这意味着一旦应用加载完成，所有 NgModule 都会加载，无论它们是否立即需要。对于包含大量路由的大型应用，可以考虑延迟加载——一种按需加载 NgModule 的设计模式。延迟加载有助于减小初始包的大小，从而缩短加载时间。

13. 你能解释一下 Angular Components 的生命周期钩子吗？

在您的应用程序通过调用其构造函数来实例化组件或指令后，Angular 会在该实例生命周期的适当时间点调用您已实现的钩子方法。

生命周期钩子

Angular 按以下顺序调用这些钩子方法：

  1. ngOnChanges：当输入/输出绑定值改变时调用。
  2. ngOnInit：在第一个 ngOnChanges 之后调用。
  3. ngDoCheck：如果我们作为开发人员触发了自定义变更检测，则会调用它。
  4. ngAfterContentInit：在组件内容初始化后调用。
  5. ngAfterContentChecked：每次检查组件内容后调用。
  6. ngAfterViewInit：在组件的视图初始化后调用。
  7. ngAfterViewChecked：每次检查组件的视图后调用。
  8. ngOnDestroy：在指令被销毁之前调用。

14.ViewChild和ContentChild有什么区别？

ViewChild 和 ContentChild 用于 Angular 中的组件通信，例如，如果父组件想要访问一个或多个子组件。

  • ViewChild 是模板的一部分的任何组件、指令或元素。
  • ContentChild 是模板中投射的任何组件或元素。

在 Angular 中存在两种不同的 DOM：

  • 内容 DOM仅了解手头组件提供的模板或通过注入的内容<ng-content>。
  • 查看 DOM，它仅了解封装的和下降的组件。

15. Angular 模块和 JavaScript 模块有什么区别？

这两种类型的模块都可以帮助模块化代码，并且 Angular 依赖于这两种类型的模块，但它们非常不同。

JavaScript 模块是包含 JavaScript 代码的单独文件，通常包含应用程序中用于特定目的的类或函数库。

NgModule 特定于 Angular，并且 NgModule 是一个由@NgModule装饰器用元数据对象标记的类。

16.什么是@HostBinding和@HostListener？

  • @HostListener()函数装饰器允许你处理指令类中宿主元素的事件。例如，当你用鼠标悬停在宿主元素上时，它可以改变宿主元素的颜色。
  • @HostBinding()函数装饰器允许你通过指令类设置宿主元素的属性。在这个指令类中，我们可以更改任何样式属性，例如高度、宽度、颜色、边距、边框等。

17.OnPush 和默认变更检测有什么区别？

请阅读我的文章《您将需要的 Angular 变化检测的最后指南》以获得详细解释。

结论

希望这份 Angular 面试题清单能帮助你获得下一个 Angular 职位。如果你知道其他重要的 Angular 面试题，欢迎留言。

链接

文章来源：https://dev.to/mokkaapps/my-top-angular-interview-questions-237h
Devto 翻译
PREV
我最常问的 React 面试问题
NEXT
我对高级开发人员的定义：对你正在做的事情充满热情，成为一个“问题解决者”，学习编程语言和框架的基础知识，成为一名导师，并拥有一名导师，保持自己与时俱进，离开你的舒适区，为自己的观点而战，善于社交，也关注软技能，结论