49个Angular面试问题和答案[2023]

你计划应聘 Angular 开发者职位吗？好的，准备好这些 Angular 面试问题是最好的选择。

如果你是一个 JavaScript 开发者，你可能了解 Angular 前端开发框架。在当前世界中，它已成为开发者最受需求的技能之一。

然而，要对 Angular 框架有一个良好的理解可能有点困难。在这种情况下，为面试官可能提出的任何问题做好准备是必不可少的。从指令到框架，这将帮助你在面试中表现出色，并获得能推动你职业发展的工作。

我们整理了一些最受欢迎的 Angular 面试问题，你应该为之做好准备，以获得你梦寐以求的工作机会。

Angular 是什么，为什么引入它？

Angular 是一个用于创建单页应用程序的开源框架。Angular 使用 TypeScript 构建，并设计为扩展 HTML 的语法。

Angular 由 Google 的工程师 Miško Hevery 在 2009 年创建。他将这个框架作为一个个人项目创建，并命名为 AngularJS，后来被 Google 接手。在 Google 接管了这个框架的开发和维护工作后，它被重命名为 Angular 2.0，或简称为 Angular。

提到 Angular 的优势。

• 模块化架构：Angular 中的代码被分组为组件，使得重用和重写代码变得容易，而不需要改变整个源代码。因此，你可以构建一个复杂的应用程序，将其划分为易读和组织良好的组件。
• 基于 TypeScript 构建：TypeScript 是 JavaScript 的超集。它以其优秀的代码质量而闻名，可以帮助早期发现代码问题。
• 得到 Google 的支持：Google 是技术界的重要名字之一，并拥有一些最优秀的工程师。
• 声明式 UI：Angular 扩展了易于使用的 HTML 语言的功能。
• 支持渐进式 Web 应用程序（PWA）：Angular 开发者可以创建功能类似于移动应用程序的渐进式 Web 应用程序，降低了与开发相关的成本。

讨论 Angular 和 Angular JS 之间的区别。

大多数人将 AngularJS 和 Angular 混为一谈。然而，它们是不同的框架。

AngularJS 是首个被创建的框架，它使用 JavaScript 构建。Miško Hevery 创建了 AngularJS，但 Google 最终接管了它的维护工作。Google 在2022年1月停止了对 AngularJS 的维护。

在 Google 接管了 AngularJS 后，它从头开始重新创建了一切，并使用 TypeScript 创建了一个名为 Angular 2.0 或简称为 Angular 的新框架。这个新框架引入了基于组件的架构和其他增强功能。

什么是 Angular 表达式？它们与 JavaScript 表达式有何区别？

Angular 表达式是开发人员将代码片段放入 {{ expression }} 绑定中的一种方式。Angular 表达式与 JavaScript 表达式的主要区别如下：

• 在显示格式化数据之前使用过滤器非常简单。
• 对 undefined 和 null 的评估是宽容的，而不是 JavaScript 的 undefined 会生成 ReferenceError 和 TypeError。
• 相对于一个作用域对象进行求值。
• Angular 表达式包括异常、条件和循环。

简要介绍 Angular 的不同生命周期钩子。

Angular 生命周期的钩子在检查触发器和阶段变化时非常受欢迎，这些变化发生在整个特定阶段的持续时间内。生命周期组件包括构造函数，它分为四个主要部分：ngOchanges、ngOnInit、ngDoCheck 和 ngOnDestroy。ngOchanges 还包括 ngAfterViewInit、ngAfterContentInit、ngAfterViewChecked 和 ngAfterContentChecked。

• ngOnchanges( ) – 当组件的一个或多个输入属性发生变化时，会调用此方法。在hook – SimpleChanges中接收属性的先前值和当前值。
• ngOnInit( ) – 在ngOchanges之后，用于初始化设置输入属性和组件。
• ngDoCheck( ) – 在第三阶段调用以处理和检测使用Angular无法实现的变化。可以使用此钩子快速实现变更检测算法。
• ngAfterContentInit( ) – 另一个钩子是在组件中获取内容项目后响应。
• ngAfterContentChecked( ) – 接下来是在每次ngDoCheck和ngAftercontentInit之后调用，响应投射内容后。
• ngAfterViewInit( ) – 接下来调用的钩子是ngAfterViewInit，用于在检查组件视图后响应子组件的视图。
• ngOnDestroy( ) – 在Angular销毁组件之前，帮助分离事件处理程序和清理代码。

什么是AOT和JIT在Angular中的区别？

许多人可能会对Angular中的AOT和JIT编译器感到困惑，因此了解基本知识是很重要的：

• Ahead-of-Time (AOT) 编译器在构建时在服务器上编译代码。与此同时，Just-in-Time (JIT) 编译器是在应用程序的浏览器中运行时编译的。
• AOT适用于生产模式，而JIT适用于开发模式，可以编译Angular项目中的代码。
• AOT编译包括ng serve和ng build命令，而JIT编译包括ng serve和ng build CLI命令。
• AOT可以减小捆绑包大小以实现更快的渲染，而JIT具有调试和实现主要功能以映射文件。

深入了解不同类型的Angular过滤器。

Angular使用过滤器来显示用户对表达式值的格式化，这些过滤器可以添加到模板、指令、服务和控制器中。根据需求，用户可以创建个性化的过滤器，允许根据条件组织数据。在管道符号（|）之后，将过滤器放置在表达式中。Angular中常用的主要过滤器包括：

• number – 将值转换为字符串
• currency – 将数字转换为货币格式
• json – 将任何对象转换为JSON字符串
• date – 将其转换为任何日期格式
• limitTo – 将数组或字符串限制为特定的字符串或元素
• orderBy – 按表达式对数组进行排序
• uppercase – 将字符串转换为大写
• lowercase – 将字符串转换为小写
• filter – 从给定数组中选择子集

什么是Angular中的视图封装？ 

视图封装描述了模板和样式封装。Angular有三种视图封装类型：仿真、无和Shadow DOM。仿真是默认样式，其中Angular为组件的HTML元素添加了唯一的属性。这种方法使样式仅适用于其视图。

解释Angular CLI

Angular Command Line Interface，简称Angular CLI，是一个命令行工具，可用于创建、开发和维护Angular应用程序。您还可以使用此工具创建和管理工作区。您还可以使用Angular CLI生成文档。

什么是Schematics CLI

Schematics CLI是建立在Angular CLI之上的，用于为Angular应用程序生成和更新代码以及执行其他相关任务。Schematics CLI有助于减少重复的任务，并具有预定义的蓝图，确保代码一致性和最佳实践。

什么是Angular Universal？

这个功能允许在服务器上渲染Angular应用程序。这项技术使得在将应用程序发送给客户端/视图之前可以预先呈现Angular应用程序。

什么是Angular元素？

这个功能允许开发人员将Angular组件打包成Web或自定义元素。当您将组件转换为自定义元素时，您使得所有所需的Angular基础设施对浏览器可用。

讨论Angular身份验证和授权

身份验证验证用户的身份。用户需要提供电子邮件/用户名和密码。如果身份验证成功，用户就可以访问应用程序。

授权是指根据提供的凭据来拒绝或授予对应用程序资源的访问权限的过程。

定义启动引导。

启动引导是在Angular中启动或初始化应用程序的一种方式，无论是自动还是手动。让我们帮助您更好地理解：

• 如果需要，可以在标记上添加ng-app指令时，会自动包含引导引导。Angular编译DOM，并与模块关联，找到ng-app指令。
• 手动引导是初始化Angular应用程序并将控制权交给开发人员以执行重大操作和任务来编译页面。

简述Angular指令。

当涉及到Angular指令时，有三种重要的类型，如下：

• 属性 – 使用属性可以更改元素、另一个指令和组件的行为和外观。它使用ngStyle和ngClass作为元素的属性。
• 组件 – 它由模板组成，可以使用CSS样式、TypeScript代码和HTML模板定义单个用户界面。通常使用@符号进行装饰，使得Angular编译器可以将其替换为组件模板。
• 结构型 – 它通过使用不同的指令（如ngIf指令）来更改视图结构，以隐藏或显示某些数据。

什么是TypeScript？

TypeScript是一种强类型的编程语言。它是JavaScript的超集，建立在JavaScript之上。因此，它提供了JavaScript的所有功能，并引入了类型，允许开发人员在进入生产之前捕获错误。

什么是单页应用程序？

单页应用程序是只有一个HTML页面的应用程序。单页应用程序在用户与应用程序交互时动态更新网页内容，而无需重新加载整个应用程序。Angular是创建单页应用程序的一个框架的例子。

什么是注解？

注解是可以显示在连接器或节点上的文本块。这些函数可以附加到方法、属性或类上，以提供附加配置或修改它们的行为。要编写注解，从要装饰的目标元素之前使用@符号开始。

什么是组件？

组件是Angular应用程序的基本用户界面构建块。这些组件包含HTML、CSS和TypeScript，定义了UI的外观和行为。

解释RxJS。

JavaScript的响应式扩展（RxJS）使用可观察对象，允许开发人员执行响应式编程。其目标是使用RxJS框架在Angular中组合基于回调的代码或异步操作。

它可以帮助将数据流传递给订阅者，从发布者那里发出值。如果您不使用Angular，其他编程语言（如Python和Java）也可以使用反应式代码使用可观察对象。

什么是动态组件？

动态组件是可以在运行时创建和渲染的组件。动态组件是动态创建的，不像静态组件是在标记中声明或在模板中定义。您可以使用动态组件创建动态菜单系统、动态聊天系统等等。

解释数据绑定。

数据绑定被认为是建立组件和DOM之间连接的最有影响力和最基本的功能之一。它可以简单地定义交互式应用程序的过程，而无需担心拉取和推送模板和组件。在Angular中使用了多种类型的数据绑定，例如

• 属性绑定，
• 双向数据绑定，
• 事件绑定，以及
• 字符串插值。

什么是管道？

管道是接受输入值并返回转换值的函数。您可以使用管道来转换货币金额、日期或字符串。

什么是纯管道和非纯管道？

纯管道是其输出由输入决定的管道。Angular管道默认为纯管道，仅在输入发生变化时调用。

非纯管道在循环中发生变化时被调用。然而，该变化不一定发生在输入上。非纯管道依赖于外部状态，比如您的位置或时间。

什么是PipeTransform接口？

PipeTransform接口是一个内置接口，接受输入值并返回转换值。在Angular中，transform()方法会以绑定的值作为第一个参数，并以列表形式的其他参数作为第二个参数调用。

什么是promises和observables？

promises在Angular中是单播的，这意味着它们只会执行一次，即使您多次调用它们。

observables在Angular中是多播的，这意味着每次您订阅一个observable时，它都会执行。

什么是控制器？

控制器仅在AngularJS中可用。然而，Angular使用组件。控制器是AngularJS的MVC架构的一部分之一。AngularJS中的控制器定义了特定UI部分的行为和逻辑。

什么是字符串插值？

字符串插值允许用户将动态数据显示给最终用户（在HTML模板上）。这种单向绑定技术将数据从TypeScript代码传输到HTML模板或视图。字符串插值使用双大括号（{{}}）将组件中的数据显示到视图中。

什么是延迟加载？

此功能允许您在激活特定路由时加载JavaScript组件。这种方法可以提高应用程序的性能，因为它不会一次加载所有内容。

什么是FormBuilder？

FormBuilder是一个实用类，提供了创建FormControl、FormGroup或FormArray的各种方式。此实用类减少了创建复杂表单所需的Angular样板代码量。

什么是响应式表单？

响应式表单是以编程方式管理其状态的表单。这些表单通过每个实例提供的方法和属性提供对给定控件的信息的访问。响应式表单灵活、强大且易于测试。

什么是装饰器？

装饰器是允许向方法、类、参数或属性添加元数据的函数或特性。装饰器可以在设计时修改或增强方法、类、参数或属性的行为。我们在装饰器之前使用@符号。

什么是属性装饰器？

属性装饰器是应用于类属性的装饰器，用于修改其行为或元数据。一个完美的属性装饰器的例子是@Input装饰器，它允许属性从父组件中获取/接收值。

什么是类装饰器和方法装饰器？

类装饰器应用于Angular中的类。类装饰器的例子包括@Component、@NgModule和@Directive。

方法装饰器应用于类中的方法。方法装饰器的例子包括@HostListener和@ViewChild。

什么是属性绑定？

它是一种单向机制，允许用户设置元素的视图属性。属性绑定允许您动态控制组件的行为和外观。

什么是双向绑定？

这种机制允许用户绑定组件属性和HTML元素属性。双向绑定允许您的组件监听事件并在子组件和父组件之间动态更新值。

什么是模板表达式？

这些是在模板中计算和显示的表达式。模板表达式用于显示动态内容，例如计算结果或属性的值。

什么是模板语句？

模板语句是您可以在HTML代码中使用的属性/方法，用于响应用户事件。这些事件包括鼠标移动、表单提交或按钮点击。

什么是模块？

在Angular中，模块是将相关组件、服务、管道和指令组合在一起工作的容器。Angular中的模块化系统称为NgModule。

什么是状态函数？

您可以使用state()函数定义可以在每个转换结束时调用的不同状态。state()函数接受两个参数：一个唯一名称，即closed或open，和一个style()函数。

什么是样式函数？

样式函数声明一个包含CSS样式/属性的值/键对象，可用于动画序列中的动画状态。

什么是多播？

它是使用单个执行向多个订阅者广播列表的做法。为了实现这一点，您可以使用多播可观察对象，这意味着您不必在文档上注册多个侦听器，而是可以重用第一个侦听器并将值发送给所有订阅者。

Angular路由器中可以触发的不同类型的事件有哪些？

有不同的事件，但我们将提及几个。

NavigationStart：在路由器开始导航到新路由时触发。

NavigationEnd：在Angular路由器完成新路由的导航时触发。

NavigationError：在路由器导航过程中遇到错误时触发。

什么是路由链接？

在Angular中，路由链接用于使用Angular路由器模块在不同组件或视图之间导航。

您可以通过以下方式导航到“home”路由：

Home

解释依赖注入

依赖注入是Angular中的一个概念，它允许使用Angular装饰器（如Injectables、Directives、Components和Pipes）的类配置它们所需要的依赖项。这个概念通过注入器抽象实现依赖提供者与依赖使用者之间的交互。

解释MVVM架构

MVVM是Model-View-ViewModel的缩写。

• 模型：表示Angular应用程序的数据和业务逻辑。
• 视图：表示用户界面。
• 视图模型：作为模型和视图之间的中介。Angular应用程序中的组件对应于视图模型。

讨论结构指令和属性指令的区别

结构指令用于向DOM添加元素或删除元素。结构指令的名称前面有一个*符号。例如，*ngFor、*ngIf和*NgSwitch。

属性指令用于修改DOM元素的外观或行为。要使用这些指令，必须在它们之前添加方括号[]。

解释自定义元素的工作原理

自定义元素功能允许您创建一个可重用的Angular组件，并在支持Web组件的其他框架中重用它。例如，您可以创建一个名为home-button的自定义元素，它呈现具有Angular功能的按钮。然后，您可以像普通HTML一样在HTML代码中重复使用这个home-button。

组件如何在Angular中共享数据？

• 从父组件到子组件：使用()装饰器将数据从父组件共享到子组件。
• 从子组件到父组件：使用()装饰器将数据从子组件共享到父组件。
• 共享服务：您可以将服务注入到父组件和子组件中，然后使用它来共享数据。
• ViewChild：您可以使用ViewChild装饰器从父组件中访问子组件。

结论

这些是Angular面试中通常被问到的关键问题和答案。它将帮助您为面试做好准备，成功通过面试，并获得理想的工作。

如果您已经完成了这个，了解更多关于AngularJS的信息。