Angular 面试题（第三部分）

在本文中，我们将看到一份精心策划的 2021 年 Angular 面试问题列表，以及针对有经验的人和新手的答案。

为什么在 Angular 中 TypeScript 优先于 JavaScript？

TypeScript 简化了 JavaScript 代码，使其更易于阅读和调试。TypeScript 为 JavaScript IDE 和实践提供了高效的开发工具，例如静态检查。TypeScript 使代码更易于阅读和理解。借助 TypeScript，我们可以在纯 JavaScript 的基础上取得巨大的进步。

TypeScript 相对于 Javascript 还有更多优点：

一致性
、生产力、
可维护性
、模块化、
尽早发现错误

Angular 中的 Bootstrapping 模块是什么？

Angular 中的 Bootstrapping 是核心 ng 模块中的一个函数组件，用于启动 Angular 应用程序。默认情况下，Appcomponent 是将被引导的默认组件。

下面是在 app.module.ts 中引导角度应用程序的默认代码

@NgModule({
    declarations: [
        AppComponent,

    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
    ],
    providers: [],
    bootstrap: [AppComponent],
    schemas: []
})

Angular 中的 Pure 管道和 Impure 管道有什么区别？

仅当 Angular 检测到传递给管道的值或参数发生变化时才会调用纯管道。

无论值或参数是否发生变化，每个变化检测周期都会调用一个不纯管道。

下面是管道及其用于设置管道类型的装饰器的示例

@Pipe({
 name: 'myCustomPipe', 
 pure: true    // true means this is a Pure Pipe and false means its and Impure Pipe (default is true)
})

export class MyCustomPipe {}

什么是 RxJS？

RxJS 的全称是 Reactive Extension for Javascript。它是一个 JavaScript 库，使用可观察对象进行响应式编程，处理异步数据调用、回调和基于事件的程序。

RxJS 是一个使用可观察对象进行响应式编程的库，它使编写异步或基于回调的代码变得更加容易。RxJS 可以与任何其他 JavaScript 库和框架一起使用。

什么是可观察的？

可观察对象 (Observable) 只是一个函数，它能够随时间推移同步或异步地提供多个值。你也可以将可观察对象 (Observable) 视为多个值的惰性推送集合。

可观察对象支持在应用程序各部分之间传递消息。它们在 Angular 中被频繁使用，是一种用于事件处理、异步编程和处理多个值的技术。

我们可以订阅可观察对象并同步或异步获取值。

下面是如何创建 Observable 的示例：

var observable = Rx.Observable.create((observer: any) =>{

   observer.next("This is an Observable");

})

observable.subscribe((data)=>{
   console.log(data);    // output - "This is an Observable"
});

什么是观察员？

观察者只是具有三个回调的对象，每个回调对应一个可观察对象可能传递的通知类型。

观察者 (Observer) 是可观察对象 (Observable) 传递值的消费者。观察者只是一组回调函数，分别对应可观察对象传递的每种通知类型：next、error 和 complete。

下面是观察者的示例以及订阅后检索到的值：

const observer = {
 next: x => console.log('This is next value: ' + x),
 error: err => console.error('Observer got an error: ' + err),
};

observable.subscribe(observer);

//OR

observable.subscribe(observer => {
  observer.next(10);
  observer.error("something went wrong");  
});

什么是 Angular Elements？

Angular 元素是打包为自定义元素的 Angular 组件（也称为 Web 组件），这是一种以与框架无关的方式定义新 HTML 元素的 Web 标准。

自定义元素扩展了 HTML，它允许您定义一个由 JavaScript 代码创建和控制内容的标签。浏览器维护一个 CustomElementRegistry，其中包含已定义的自定义元素，它将可实例化的 JavaScript 类映射到 HTML 标签。

Angular Elements 实例：Angular Elements 工作示例

目前，Chrome、Opera 和 Safari 等浏览器均支持自定义元素标准。Firefox 和 Edge 浏览器提供了 polyfill 插件来支持自定义元素标准。Angular Elements 功能可通过 @angular/elements 包获取。

为了跟踪所有可用的自定义元素，浏览器维护一个注册表，每个元素都需要先注册。在这个注册表中，标签的名称会映射到控制该元素行为和输出的 JavaScript 类。

什么是 Angular Universal 或 Angular SSR？

Angular Universal 是 Angular 团队提供的一种机制，它允许你将单页 Angular 应用程序渲染到服务器端，而不是浏览器端。典型的 Angular 应用程序是单页应用程序（又称 SPA），其渲染发生在浏览器端。此过程也可以称为客户端渲染（CSR）。

对于现代 Web 应用程序来说，Angular Universal 是一种非常有用且对 SEO 友好的方法。

Angular Universal 提供了 2 个选项：

服务器端渲染：在此方法中，请求的页面将在服务器上完全渲染并发送到浏览器
预渲染：在此方法中，您必须提供要预渲染的路由列表，然后通过使用预渲染命令和提到的路由，它将完成具有完全渲染的 HTML 页面的构建
要将 Angular Universal 添加到您的项目中，请使用以下命令：

ng add @nguniversal/express-engine

Angular 中的服务工作者是什么？

Angular 中的 Service Worker 是一个在 Web 浏览器中运行的脚本，用于管理应用程序的缓存。Service Worker 充当网络代理。它们拦截应用程序发出的所有 HTTP 请求，并可以选择如何响应这些请求。

服务工作者有助于提高应用程序的性能。

要在 Angular 应用程序中添加服务工作者，请使用以下命令：

ng add @angular/pwa

查看本文：它涵盖了在 Angular 应用程序中添加服务工作者的完整步骤

Angular 中的延迟加载是什么？

延迟加载是 Angular 中的一项技术，允许你在特定路由激活时异步加载 JavaScript 组件。它通过将应用程序拆分成多个包来提高应用程序的加载速度。当用户浏览应用程序时，这些包会根据需要进行加载。

延迟加载的概念不是像批量加载那样一次性加载整个网页并将其呈现给用户，而是仅加载所需的部分并延迟剩余部分，直到用户需要为止。

下面是延迟加载模块的示例路由：

const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule'}
];

Angular 中的共享模块是什么？

Angular 中的共享模块可帮助您在更短的时间内编写更有条理的代码，从而提高您的工作效率。共享模块是声明组件以实现可复用性的理想位置。您无需在每个模块中重新导入相同的组件，只需导入共享模块即可。

创建共享模块可以让你更好地组织和简化代码。你可以将常用的指令、管道和组件放入一个模块中，然后在应用的其他部分需要时导入该模块。

以下是共享模块的示例：

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

import { SharedRoutingModule } from "./shared-routing.module";
import { SharedComponent } from "./components/shared/shared.component";

@NgModule({
 declarations: [SharedComponent],
 imports: [CommonModule, SharedRoutingModule],
 exports: [SharedComponent]
})

export class SharedModule {}

Angular 中的 DOM Sanitizer 是什么？

Angular 中的 Dom Sanitizer 通过清理值以确保在不同的 DOM 上下文中可以安全使用，帮助防止跨站点脚本安全漏洞 (XSS)。

以下是 Angular 为 Sanitization 提供的不同方法，并确保任何用户数据都针对此安全上下文进行适当转义。

//default sanitize data
abstract sanitize(context: SecurityContext, value: string | SafeValue): string | null

//sanitize html
abstract bypassSecurityTrustHtml(value: string): SafeHtml

//sanitize css
abstract bypassSecurityTrustStyle(value: string): SafeStyle

//sanitize scripts
abstract bypassSecurityTrustScript(value: string): SafeScript

//sanitize url
abstract bypassSecurityTrustUrl(value: string): SafeUrl

//sanitize resource urls
abstract bypassSecurityTrustResourceUrl(value: string): SafeResourceUrl

查看本系列的其他文章：

本系列第 1 部分：Angular 面试问题第 1 部分

本系列的第 2 部分：Angular 面试问题第 2 部分

本系列第 3 部分：Angular 面试问题第 3 部分