Angular面试题及答案

1) 什么是 Angular？/ 你对 Angular 有什么了解？

Angular 是由 Google 开发和维护的最受欢迎的 JavaScript 框架之一。它是一个基于 TypeScript 的开源前端 Web 框架。它最适合开发企业级 Web 应用程序，因为它的代码是可重用和可维护的。

2) Angular 集成了哪些强大的功能？

Angular 集成了一些强大的功能，如声明式模板、端到端工具、依赖注入以及各种其他最佳实践，这些功能简化了开发流程。

3) Angular 的主要目的是什么？

使用 Angular 的主要目的是创建快速、动态和可扩展的 Web 应用程序。我们可以使用组件和指令非常轻松地使用 Angular 创建这些应用程序。

Angular 最初是作为一个 SPA（单页应用程序）框架开始的，现在它通过依赖注入支持基于不同用户的动态内容。它为 Web 应用程序的轻松开发提供了一个平台，并赋予前端开发人员构建跨平台应用程序的能力。YouTubeTV 是一个使用 Angular 的最受欢迎的例子。

4) AngularJS 和 Angular 有什么区别？

让我们以表格形式比较 AngularJS 和 Angular 的功能

AngularJS 和 Angular 之间的区别列表-

5) 使用 Angular 的最大优点是什么？

以下是使用 Angular 框架的最大优点列表

• Angular 支持双向数据绑定。
• 它遵循 MVC 模式架构。
• 它支持静态模板和 Angular 模板。
• 它允许您添加自定义指令。
• 它还支持 RESTful 服务。
• Angular 支持验证。
• Angular 提供客户端和服务器通信。
• 它提供依赖注入支持。
• 它提供了事件处理程序、动画等强大功能。

6) 你对 Angular 表达式有什么理解？Angular 表达式与 JavaScript 表达式有何不同？

Angular 表达式是用于将应用程序数据绑定到 HTML 的代码片段。Angular 解析表达式，并将结果返回到编写表达式的位置。Angular 表达式通常写在双括号中：{{ expression }}，类似于 JavaScript。

语法

{{ expression }}

以下是 Angular 表达式和 JavaScript 表达式之间的一些区别列表

1. Angular 表达式和 JavaScript 表达式之间最关键的区别在于，Angular 表达式允许我们在 HTML 中编写 JavaScript。另一方面，JavaScript 表达式不允许。

2. Angular 表达式在本地作用域对象上进行求值。另一方面，JavaScript 表达式在全局 window 对象上进行求值。我们可以通过一个例子更好地理解它。假设我们有一个名为 test 的组件

在上面的示例中，我们可以看到 Angular 表达式用于显示 message 属性。在当前模板中，我们使用的是 Angular 表达式，因此我们无法访问本地作用域之外的属性（在本例中为 TestComponent）。这证明 Angular 表达式始终基于作用域对象而不是全局对象进行求值。

3. Angular 表达式可以处理 null 和 undefined，而 JavaScript 表达式不能。

请看以下 JavaScript 示例

运行上述代码后，您会在屏幕上看到显示 undefined。虽然最好不要将任何属性留空，但用户不需要看到这一点。

现在来看以下 Angular 示例

在上面的示例中，您不会在屏幕上看到显示 undefined。

4. 在 Angular 表达式中，我们不能使用循环、条件和异常。使 Angular 表达式非常有益的区别在于使用了管道。Angular 使用管道（在 AngularJS 中称为过滤器）在显示数据之前对其进行格式化。

请看这个例子

在上面的示例中，我们使用了一个名为 lowercase 的预定义管道，它将所有字母转换为小写。如果您运行上述示例，您将看到输出显示为“hello tpointtech”。

另一方面，JavaScript 没有管道的概念。

7) Angular 中的模板是什么？

在 Angular 中，模板包含 Angular 特定的元素和属性。这些是用 HTML 编写的，并与来自模型和控制器（进一步渲染以提供用户动态视图）的信息相结合。

8) Angular 中的注解（Annotation）和装饰器（Decorator）有什么区别？

在 Angular 中，注解是使用 Reflect Metadata 库的类的“唯一”元数据集合。它们用于创建“注解”数组。另一方面，装饰器是用于在不实际更改原始源代码的情况下分离类装饰或修改的设计模式。

9) 为什么 Angular 被引入为客户端框架？

在 Angular 出现之前，Web 开发人员使用 VanillaJS 和 jQuery 开发动态网站。后来，当网站变得越来越复杂，增加了功能，维护代码变得很困难。此外，jQuery 没有提供在视图之间进行数据处理的机制。对 Angular 这样的客户端框架的需求显而易见，它可以使开发人员的生活更轻松，通过处理关注点分离并将代码划分为更小的信息块（组件）。

像 Angular 这样的客户端框架使开发人员能够开发高级 Web 应用程序，如单页应用程序。这些应用程序也可以使用 VanillaJS 开发，但这样开发过程会变慢。

10) Angular 应用程序如何工作？

每个 Angular 应用都包含一个名为 angular.json 的文件。此文件包含应用程序的所有配置。在构建应用程序时，构建器会查看此文件以查找应用程序的入口点。请参阅 angular.json 文件的结构

当应用程序进入构建部分时，options 对象的 main 属性定义了应用程序的入口点。应用程序的入口点是 main.ts，它创建一个浏览器环境供应用程序运行，并调用一个名为 bootstrapModule 的函数，该函数引导应用程序。

这两个步骤按照以下顺序在 main.ts 文件中执行

在上面的代码行中，AppModule 正在被引导。

AppModule 在 app.module.ts 文件中声明。此模块包含所有组件的声明。

以下是 app.module.ts 文件的示例

在上图中，您可以看到 AppComponent 正在被引导。它在 app.component.ts 文件中定义。此文件与网页交互并为其提供数据。

以下是 app.component.ts 文件的示例

每个组件都使用三个属性声明

1. 选择器 - 用于访问组件。
2. 模板/模板URL - 包含组件的 HTML。
3. 样式URL - 包含组件特定的样式表。

现在，Angular 调用 index.html 文件。该文件随后调用根组件 app-root。根组件在 app.component.ts 中定义。

看看 index.html 文件是什么样的

根组件的 HTML 模板显示在 <app-root> 标签内。这就是每个 Angular 应用程序的工作方式。

11) 为什么 Angular 比其他框架更受欢迎？/ Angular 相对于其他框架有什么优势？

由于以下功能，Angular 比其他框架更受欢迎

卓越的内置功能： Angular 提供了许多开箱即用的内置功能，如路由、状态管理、RxJS 库、依赖注入、HTTP 服务等。因此，开发人员无需单独寻找上述功能。

声明式 UI： Angular 具有声明式 UI。它使用 HTML 来渲染应用程序的 UI，因为 HTML 是一种声明式语言。它比 JavaScript 更容易使用。

Google 长期支持： Angular 由 Google 开发和维护。Google 有一个长期的计划来坚持 Angular 并提供支持。

12) Angular 的不同生命周期钩子是什么？简要解释它们。

当 Angular 组件被创建时，它们会进入它们的生命周期，并在它们被销毁时保留。Angular 生命周期钩子用于检查阶段，并在整个持续时间的特定阶段触发更改。

ngOnChanges( )：当组件的一个或多个输入属性发生更改时，会调用此方法。钩子接收一个 SimpleChanges 对象，其中包含属性的先前和当前值。

ngOnInit( )：这是第二个生命周期钩子。它在 ngOnChanges 钩子之后调用一次。它用于初始化组件并设置组件的输入属性。

ngDoCheck( )：在 ngOnChanges 和 ngOnInit 之后调用此钩子，用于检测 Angular 无法检测到的更改并对其采取行动。在此钩子中，我们可以实现自己的更改检测算法。

ngAfterContentInit( )：在第一个 ngDoCheck 钩子之后调用此钩子。此钩子在内容投影到组件内部后响应。

ngAfterContentChecked( )：在 ngAfterContentInit 和后续的每个 ngDoCheck 之后调用此钩子。它在投影内容被检查后响应。

ngAfterViewInit( )：在组件的视图或初始化子组件的视图后调用此钩子。

ngAfterViewChecked( )：在 ngAfterViewInit 之后调用此钩子。它在组件的视图或子组件的视图被检查后响应。

ngOnDestroy( )：在 Angular 销毁组件之前调用此钩子。用于清理代码和分离事件处理程序。

在我们描述的上述钩子中，ngOnInit 钩子是最常用的钩子。让我们看看如何使用 ngOnInit 钩子。如果您需要在组件创建过程中处理大量数据，最好在 ngOnInit 钩子中执行此操作，而不是在构造函数中。

请看示例

在上面的代码中，您可以看到我们导入了 OnInit，但我们使用了 ngOnInit 函数。这就是我们如何使用其余钩子。

13) Angular 中的 AOT 是什么？

在 Angular 中，AOT 代表 Ahead-Of-Time（提前编译）编译器。它用于在浏览器下载和运行代码之前，在构建阶段将 Angular HTML 和 TypeScript 代码转换为高效的 JavaScript 代码。通过在构建过程中编译应用程序，可以在浏览器中实现更快的渲染。

14) 在 Angular 中使用 AOT 编译器有什么原因？

Angular 应用程序由多个组件及其 HTML 模板组成。由于这些 Angular 组件和模板，浏览器无法直接理解它们。因此，Angular 应用程序在浏览器中运行之前需要一个编译过程。这就是为什么需要 AOT 编译器的原因。

15) 使用 Angular 中的 AOT 有哪些最大的好处？

以下是使用 Angular 中的 AOT 编译器的优点

渲染速度更快：当我们使用 AOT 编译器时，浏览器会收到应用程序的预编译版本进行下载。在这里，浏览器加载可执行代码以立即渲染应用程序，而无需等待先编译应用程序。

Angular 框架的下载大小更小：如果应用程序已编译，AOT 可以让您无需下载 Angular 编译器。编译器大约是 Angular 本身的一半，因此省略它可以大大减小应用程序的负载。

异步请求更少：编译器用于将外部 HTML 模板和 CSS 样式表内联到应用程序 JavaScript 中，从而消除了对这些源文件的单独 AJAX 请求。

更早地检测模板错误：在使用 AOT 编译器时，开发人员可以在用户看到它们之前，在构建步骤中轻松检测和报告模板绑定错误。

更好的安全性：AOT 提供更好的安全性，因为它在将 HTML 模板和组件提供给客户端之前将它们编译为 JavaScript 文件。由于没有需要读取的模板，也没有有风险的客户端 HTML 或 JavaScript 评估，因此注入攻击的可能性非常小。

16) Angular 中的 JIT 是什么？

在 Angular 中，JIT 代表 Just-in-Time（即时）编译器。JIT 编译器提供动态翻译或运行时编译，它提供了一种执行计算机代码的方式，该代码涉及在程序执行期间而不是在执行之前进行编译。

17) Angular 中的 JIT 和 AOT 有什么主要区别？

以下是 Angular 中 JIT 和 AOT 编译器之间的主要区别

• Just-in-Time (JIT) 编译器在运行时在浏览器中编译我们的应用程序，而 Ahead-of-Time (AOT) 编译器用于在服务器上的构建时编译您的应用程序。
• JIT 编译在运行 ng build（仅构建）或 ng serve（本地构建和服务）CLI 命令时默认运行。这用于开发。另一方面，我们必须为 AOT 编译将 --aot 选项与 ng build 或 ng serve 命令一起包含。
• JIT 和 AOT 都是用于在 Angular 项目中编译代码的两种方式。JIT 编译器用于开发模式，而 AOT 用于生产模式。
• JIT 易于使用。我们在 JIT 模式下可以轻松实现功能和调试，因为这里我们有一个映射文件，而 AOT 没有。另一方面，为生产使用 AOT 的最大优势是它减小了捆绑包大小，以实现更快的渲染。

18) Angular 中的作用域层级概念是什么？

Angular 将 $scope 对象提供给通常由视图使用的层级结构。这称为 Angular 中的作用域层级。它有一个根作用域，可以进一步包含一个或多个作用域，称为子作用域。

在作用域层级中，每个视图都有自己的 $scope。因此，由视图的视图控制器设置的变量将对其他视图控制器隐藏。

以下是作用域层级的典型表示

19) Angular 应用程序的主要构建块是什么？用 Angular 架构的图示解释。

以下是 Angular 应用程序的主要构建块。您可以在下图看到它们

20) Angular 中的 Observable 和 Promise 有什么区别？

在 Angular 中，一旦我们创建一个 Promise，执行就会发生，但这与 Observable 不同，因为它们是惰性的。这意味着在进行订阅之前什么都不会发生。

让我们通过一个例子来理解它

运行上面的 Observable 时，您将按以下顺序看到以下消息

在这里，您可以看到 Observable 是惰性的。Observable 仅在有人订阅它们时才运行。这就是为什么“在订阅 Observable 之前”的消息显示在 Observable 内的消息之前。

现在来看 Promise 的例子

运行上面的 Promise 时，您将按以下顺序看到消息

这里，您可以看到 Promise 内的消息首先显示。这意味着 Promise 先运行，然后调用该方法。

它们之间的下一个区别是 Promise 始终是异步的；即使 Promise 立即解析。另一方面，Observable 可以是同步和异步的。

在上面的示例中，Observable 是同步的。让我们看看 Observable 可以是异步的情况

运行上面的 Observable 时，您将按以下顺序看到消息

22) Angular 中的指令是什么？

指令是 Angular 中的一个类，它使用 @Directive 装饰器进行声明。每个指令都有其自己的行为，您可以将其导入到应用程序的各种组件中。

23) 引入 Angular 等客户端框架的主要原因是什么？

在引入 Angular 之前，Web 开发人员使用 VanillaJS 和 jQuery 来开发动态网站，但这些技术最大的缺点是随着网站逻辑的增长，代码越来越难以维护。对于使用复杂逻辑的网站和应用程序，开发人员必须付出额外的努力来维护应用程序的关注点分离。此外，jQuery 不提供跨视图进行数据处理的机制。

引入 Angular 等客户端框架是为了克服上述问题。通过提供称为组件的新功能来处理关注点分离并将代码划分为更小的信息块，它比 VanilaJS 和 jQuery 为开发人员提供了许多好处。

Angular 等客户端框架使开发人员能够开发单页应用程序等高级 Web 应用程序。因此，引入 Angular 的主要原因是为了轻松创建快速、动态和可扩展的 Web 应用程序。

注意：我们也可以使用 VanillaJS 和 jQuery 开发动态网站和 SPA（单页应用程序），但这样做会减慢开发过程。

24) Angular CLI 是什么？

Angular CLI 是 Angular 命令行界面的缩写。它是一个命令行接口，使用 Node.js 样式模块来生成和构建 Angular 应用程序。

要使用 Angular CLI，我们必须使用以下 **npm** 命令进行安装

以下是一些在创建 Angular 项目时非常有用的命令列表

• 创建新项目： ng new
• 生成组件、指令和服务： ng generate/g
• 运行项目： ng serve

25) Angular 中的懒加载是什么？

懒加载是 Angular 路由中最强大和最有用的概念之一。它通过将网页分成块加载而不是将所有内容加载到一个大包中，从而使网页易于下载。懒加载通过使用 loadChildren 属性，在需要时异步加载路由的功能模块。

请看以下示例，我们将懒加载 Employee 和 Order 功能模块。

请看示例

26) Angular 路由器是什么？

Angular 路由器是一种机制，它使用户在执行应用程序任务时能够从一个视图导航到下一个视图。它遵循浏览器应用程序导航的概念模型。

27) 你对路由导入（router imports）有什么理解？

Angular 路由器，代表给定 URL 的特定组件视图，不是 Angular Core 的一部分。它在名为 @angular/router 的库中可用，我们必须导入所需的路由器组件。这个过程称为路由导入。

请看以下示例，说明我们如何在 app 模块中导入它们

28) 你对 RouterOutlet 和 RouterLink 有什么理解？

RouterOutlet 是路由器库中的一个指令，它充当占位符。它在模板中标记路由器应在此处显示该插座组件的位置。RouterOutlet 用作组件。

语法

另一方面，RouterLink 是锚定标签上的一个指令，它使路由器能够控制这些元素。由于导航路径是固定的，您可以像下面这样为 router-link 指令分配字符串值，

语法

29) Angular 路由器中使用的不同路由事件是什么？

在每次导航期间，路由器都会通过 Router.events 属性发出导航事件。它允许我们跟踪路由的生命周期。

以下是按顺序排列的不同路由事件列表

• NavigationStart (导航开始)
• RouteConfigLoadStart (路由配置加载开始)
• RouteConfigLoadEnd (路由配置加载结束)
• RoutesRecognized (路由识别)
• GuardsCheckStart (守卫检查开始)
• ChildActivationStart (子激活开始)
• ActivationStart (激活开始)
• GuardsCheckEnd (守卫检查结束)
• ResolveStart (解析开始)
• ResolveEnd (解析结束)
• ActivationEnd (激活结束)
• ChildActivationEnd (子激活结束)
• NavigationEnd (导航结束)
• NavigationCancel (导航取消)
• NavigationError (导航错误)

30) 你对 RouterLinkActive 有什么理解？

RouterLinkActive 是一个指令，用于根据当前的 RouterState 切换活动 RouterLink 绑定的 CSS 类。即，当此链接处于活动状态时，路由器将添加 CSS 类，当链接处于非活动状态时，将删除它们。

例如，您可以按如下方式将它们添加到 RouterLinks

31) 你对 RouterState 有什么理解？

RouterState 是一个激活路由的树。此树中的每个节点都了解“已消耗”的 URL 段、提取的参数和已解析的数据。我们可以通过使用 Router 服务和 routerState 属性在应用程序的任何位置访问当前的 RouterState。

32) HttpClient 是什么，它有什么优点？

大多数前端应用程序使用 XMLHttpRequest 接口或 fetch() API 通过 HTTP 协议与后端服务通信。出于相同的目的，Angular 提供了一个简化的客户端 HTTP API，称为 HttpClient。它基于 XMLHttpRequest 接口。这个 HttpClient 在 @angular/common/http 包中可用，您可以在根模块中如下导入

以下是 HttpClient 的一些重要优点

• HttpClient 包含可测试性功能。
• 它提供类型化的请求和响应对象。
• 它可以拦截请求和响应。
• 它支持 Observable API。
• HttpClient 还支持简化的错误处理。

33) 默认情况下，Angular 使用客户端渲染来处理其应用程序。是否可以将 Angular 应用程序渲染到服务器端？

是的，可以将 Angular 应用程序渲染到服务器端。Angular 提供了一种称为 Angular Universal 的技术，可用于在服务器端渲染应用程序。

使用 Angular Universal 的关键优点如下

• 使 Angular 应用程序在服务器端渲染可以提供更好的用户体验。通过使用它，首次用户可以立即看到应用程序的视图。因此，它可以用于提供更好的 UI。
• 它可以带来更好的 SEO。原因是许多搜索引擎期望纯 HTML 页面。因此，Angular Universal 可以确保您的内容在每个搜索引擎上都可用，这有利于更好的 SEO。
• 服务器端渲染的应用程序比普通页面加载速度更快。这是因为渲染的页面可以更快地提供给浏览器。

34) 在 Angular 中处理错误的最佳方法是什么？

错误是指请求在服务器上失败或由于网络问题而无法到达服务器。在这种情况下，HttpClient 会返回一个错误对象而不是成功响应。为了解决这个问题，我们必须通过将错误对象作为第二个回调传递给 subscribe() 方法来处理组件。

请看以下示例，了解如何在组件中处理

您可以编写错误消息，为用户提供有意义的反馈，而不是显示从 HttpClient 返回的原始错误对象。

35) 你对 Angular 引导（bootstrapping）有什么理解？

Angular 引导无非是允许开发人员初始化或启动 Angular 应用程序。Angular 支持两种引导方式

• 手动引导
• 自动引导

手动引导：手动引导为开发人员提供了更多控制，并允许他们选择如何以及何时初始化 Angular 应用。当专业人士希望在 Angular 编译页面之前执行其他任务和操作时，这很有用。

自动引导：顾名思义，自动引导会自动启动 Angular 应用。如果开发人员希望 Angular 自动引导应用程序，则需要在应用程序的根目录中添加 ng-app 指令。Angular 在找到 ng-app 指令后加载关联的模块，然后编译 DOM。

36) Angular 中的摘要周期（digest cycle）过程是什么？

Angular 中的摘要周期过程是用于监视监视列表以跟踪监视变量值变化的过程。在每个摘要周期中，都会将作用域模型值的当前版本与前一个版本进行比较。

37) Component 和 Directive 在 Angular 中有什么主要区别？

Component 是一个指令，它使用 shadow DOM 来创建封装的视觉行为。通常，组件用于通过将应用程序分解成更小的部分来创建 UI 小部件。简而言之，我们可以说组件 (@component) 是一个带有模板的指令。

Angular 中 Component 和 Directive 之间的主要区别列表

38) 你对 Angular MVVM 架构有什么理解？

MVVM 架构或 **Model-View-ViewModel** 架构是一种软件架构模式，它为开发人员提供了一种将图形用户界面（视图）的开发与业务逻辑或后端逻辑（模型）的开发分离开来的机制。通过使用这种架构，视图不依赖于任何特定的模型平台。

Angular MVVM 架构由以下三部分组成

• 模型
• 视图 (View)
• ViewModel

Model： Model 包含实体的结构并指定方法。简单来说，我们可以说 Model 包含对象的属性。

View： View 是应用程序的视觉层。它指定用户在屏幕上看到的内容的结构、布局和外观。它显示 Model 中的数据，代表 Model，并以鼠标点击、键盘输入、屏幕触摸手势等形式接收用户与 View 的交互，并通过数据绑定属性将其转发给 ViewModel。在 Angular 术语中，View 包含组件的 HTML 模板。

ViewModel： ViewModel 是应用程序的抽象层。它用于处理应用程序的逻辑。它还管理 Model 的数据并将其显示在 View 中。View 和 ViewModel 通过双向数据绑定连接。如果您对 View 进行任何更改，ViewModel 会注意到并更改 Model 中的相应数据。

39) AsyncPipe 在 Angular 中的目的是什么？

AsyncPipe 用于订阅 Observable 或 Promise，并返回它发出的最新值。当发出新值时，管道会标记组件已完成更改检测。

例如，一个时间 Observable 每 2 秒不断更新视图显示当前时间。

示例

40) 你对 Angular 中的服务（services）有什么理解？

在 Angular 中，服务是单例对象，在应用程序的生命周期中仅实例化一次。Angular 服务包含用于在应用程序的整个生命周期中维护数据的方法。Angular 服务用于组织和共享业务逻辑、模型或数据以及函数与 Angular 应用程序的各种组件。

Angular 服务提供了一些可以从 Angular 组件（如控制器或指令）调用的函数。

41) 构造函数和 ngOnInit 之间有什么主要区别？

构造函数是 TypeScript 类中的默认方法，通常用于初始化目的。另一方面，ngOnInit 是一个专门的 Angular 方法，用于定义 Angular 绑定。尽管构造函数会先被调用，但最好将所有 Angular 绑定移到 ngOnInit 方法中。

例如，我们可以通过实现 OnInit 接口来使用 ngOnInit，如下所示

42) 你对 Observable 和 Observer 在 Angular 中有什么理解？

Observable： Observable 是一个独特的对象，就像一个 Promise，用于管理异步代码。Observable 不是 JavaScript 语言的一部分，因此开发人员必须依赖一个流行的 Observable 库，称为 RxJS。Observable 是使用 new 关键字创建的。

请看一个简单的 Observable 示例以更好地理解它

Observer：任何需要被通知对象状态变化的对象都称为 Observer。Observer 是一个用于 Observable 推送通知的接口。

请看 Observer 的结构

实现了 Observer 接口以接收 Observable 通知的方法作为 Observable 的参数传递，如下所示

注意：如果您不使用通知类型的处理程序，Observer 将忽略该类型的通知。

43) 如何对 Angular 中的数据绑定类型进行分类？

在 Angular 中，我们可以将数据绑定类型分为三类，它们由数据流的方向区分。这些数据绑定类别是

• 从源到视图
• 从视图到源
• 视图到源到视图

让我们看看它们可能的绑定语法

44) Angular 中的多播（multicasting）是什么？

多播（Multicasting）是指在一次执行中向多个订阅者列表广播的做法。

让我们以一个简单的例子来演示多播功能

45) 你对 Angular Material 有什么理解？

Angular Material 是一个 UI 组件库，供专业人士用于开发一致、美观且功能齐全的网站、网页和 Web 应用程序。它遵循现代 Web 设计原则，如优雅降级和浏览器兼容性，并且能够完成网站和应用程序开发中的许多迷人工作。

46) Angular 中的懒加载是什么？为什么要使用它？

在 Angular 中，NgModules 的默认趋势是急切加载。这意味着一旦应用程序加载，所有 NgModules 都会被加载，无论它们是否立即需要。这就是为什么需要懒加载。对于拥有大量路由的大型应用程序，懒加载是必需的。这种设计模式使应用程序在仅需要时才加载 NgModules。懒加载有助于保持初始包大小更小，从而有助于减少加载时间。

47) Angular 中的过滤器（filters）有什么用途？它有哪些不同的类型？

过滤器是 Angular 的一个重要组成部分，用于格式化表达式值以显示给用户。我们可以轻松地将过滤器添加到服务、指令、模板或控制器中。我们还可以根据需要创建自定义过滤器。这些过滤器允许我们以一种只显示满足相应条件的数据的方式来组织数据。过滤器放置在表达式中使用时，放在管道符号（|）之后。

Angular 中使用的各种过滤器类型列表

• currency：用于将数字转换为货币格式。
• filter：用于从给定数组中选择一个包含项目的子集。
• date：用于将日期转换为必要的格式。
• lowercase：用于将给定字符串转换为小写。
• uppercase：用于将给定字符串转换为大写。
• orderBy：用于按给定表达式对数组进行排序。
• json：用于将任何对象格式化为 JSON 字符串。
• number：用于将数值转换为字符串。
• limitTo：用于将给定字符串或数组的限制限制为特定数量的元素或字符串。

48) 何时使用 Angular 中的指令？

如果您创建一个 Angular 应用程序，其中多个组件需要具有相似的功能，那么您必须单独将此功能添加到每个组件中。这不是一项非常容易的任务。指令用于应对这种情况。在这里，我们可以创建一个具有所需功能的指令，然后将该指令导入到需要此功能的组件中。

49) Angular 中有哪些不同类型的指令？

Angular 中主要有三种类型的指令

组件指令：组件指令用于构成指令中的主要类。要声明这些指令，我们必须使用 @Component 装饰器而不是 @Directive 装饰器。这些指令具有视图、样式表和选择器属性。

结构指令：这些指令通常用于操作 DOM 元素。结构指令的前面有一个“*”号。我们可以将这些指令应用于任何 DOM 元素。

以下是一些内置结构指令的示例

*ngIf 结构指令： *ngIf 用于检查布尔值，如果为真，则显示 div 元素。

*ngFor 结构指令： *ngFor 用于迭代列表并显示列表中的每个项目。

属性指令：属性指令用于更改 DOM 元素的外观和行为。让我们创建一个属性指令来更好地理解它

这就是我们如何创建自定义指令

转到命令终端，导航到 Angular 应用的目录，然后键入以下命令来生成一个指令

这将生成以下指令。修改指令使其看起来像这样

现在，您可以轻松地将上述指令应用于任何 DOM 元素

50) Angular 中的字符串插值（string interpolation）和属性绑定（property binding）是什么？

字符串插值和属性绑定是 Angular 中数据绑定的组成部分。数据绑定是 Angular 的一项功能，用于提供一种在组件（模型）与其视图（HTML 模板）之间进行通信的方式。有两种数据绑定方式：单向数据绑定和双向数据绑定。在 Angular 中，可以从组件将数据插入到 HTML 模板中。在单向绑定中，组件中的任何更改将直接反映在 HTML 模板中，但反之则不可能。另一方面，在双向绑定中是可能的。

字符串插值和属性绑定都是单向数据绑定的示例。它们只允许单向数据绑定。

字符串插值：字符串插值使用双花括号 {{ }} 来显示来自组件的数据。Angular 会自动运行写在花括号内的表达式。例如，{{ 5+5 }} 将被 Angular 计算，输出将是 10。此输出将显示在 HTML 模板中。

属性绑定：属性绑定用于将 HTML 元素的 DOM 属性绑定到组件的属性。在属性绑定中，我们使用方括号 [ ] 语法。

51) 可以让 Angular 应用程序在服务器端渲染吗？

是的，我们可以让 Angular 应用程序在服务器端渲染。Angular 提供了一项名为 Angular Universal 的技术，使您能够在服务器端渲染应用程序。

以下是使用 Angular Universal 的好处

更好的用户体验：它使用户能够即时看到应用程序的视图。

更好的 SEO： Angular Universal 确保内容在每个搜索引擎上都可用，从而带来更好的 SEO。

加载更快： Angular Universal 确保渲染的页面更早地提供给浏览器，从而使服务器端应用程序加载更快。

52) Angular 中的依赖注入是什么？

依赖注入是一种由 Angular 实现的应用程序设计模式。它用于形成 Angular 的核心概念。依赖是 Angular 中的服务，它们具有特定的功能。应用程序中的各种组件和指令可能需要这些服务的这些功能。Angular 提供了一种平滑的机制，通过该机制将这些依赖注入到组件和指令中。

53) 您可以演示 Angular 应用程序中不同路由之间的导航吗？

您可以通过以下方式演示 Angular 应用中不同路由之间的导航。请参阅以下代码，演示名为“My First App”的 Angular 应用中的导航。

54) Angular 和 Backbone.js 有什么区别？

以下是 Angular 和 Backbone.js 之间的各种显著区别