2019 年 35 个 Angular 7 面试热门问题

谷歌终于在 2018 年 10 月 18 日发布了 Angular 7。Angular 7 现在支持 Typescript 3.1、RxJS 6.3 和 Node 10。让我们复习一下 Angular 知识，并学习一些你在下一次 Angular 面试中可能会遇到的最新问答。

最初发表于FullStack.Cafe - 让你的技术面试不再失败

问题1：什么是管道？请举个例子。

主题：Angular
难度：⭐

管道接收数据作为输入，并将其转换为所需的输出。你可以将管道串联起来，形成可能有用的组合。你也可以编写自己的自定义管道。Angular 自带了一系列管道，例如DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipe和PercentPipe。

考虑：

<p>The hero's birthday is {{ birthday | date }}</p>

在此页面中，您将使用管道将组件的生日属性转换为人性化的日期。

🔗来源： angular.io

Q2：组件的最小定义是什么？

主题：Angular
难度：⭐⭐

Angular 中的绝对最小配置@Component是模板。两个模板属性均设置为可选，因为您必须定义template或templateUrl。

当你不定义它们时，你会得到这样的异常：

No template specified for component 'ComponentName'

不需要选择器属性，因为您也可以在路由中使用组件。

🔗来源： stackoverflow.com

Q3：Angular 组件和模块有什么区别？

主题：Angular
难度：⭐⭐

组件控制视图（html）。它们还与其他组件和服务通信，为您的应用提供功能。

模块由一个或多个组件组成。它们不控制任何 HTML。模块声明哪些组件可以被其他模块的组件使用，哪些类将被依赖注入器注入，以及哪些组件会被引导。模块允许您管理组件，从而为您的应用带来模块化。

🔗来源： stackoverflow.com

Q4：如何选择组件模板中的元素？

主题：Angular
难度：⭐⭐

您可以通过将 ElementRef 注入到组件的构造函数中来获取 DOM 元素的句柄：

constructor(myElement: ElementRef) { ... }

🔗来源： medium.com

Q5：什么是观察员？

主题：Angular
难度：⭐⭐

Observer 是一个接口，用于接收由 Observable 发送的推送通知。它的结构如下：

    interface Observer<T> {
      closed?: boolean;
      next: (value: T) => void;
      error: (err: any) => void;
      complete: () => void;
    }

实现 Observer 接口以接收可观察通知的处理程序将作为可观察参数传递，如下所示，

    myObservable.subscribe(myObserver);

注意：如果您没有为某种通知类型提供处理程序，观察者将忽略该类型的通知。

🔗来源： github.com/sudheerj

Q6：什么是可观察的？

主题：Angular
难度：⭐⭐

Observable 是一个类似于 Promise 的唯一对象，可以帮助管理异步代码。Observable 不是 JavaScript 语言的一部分，所以我们需要依赖一个流行的 Observable 库 RxJS。Observable
是使用 new 关键字创建的。让我们看一个简单的 Observable 示例：

    import { Observable } from 'rxjs';

    const observable = new Observable(observer => {
      setTimeout(() => {
        observer.next('Hello from a Observable!');
      }, 2000);
    });`

🔗来源： github.com/sudheerj

Q7：什么是 TestBed？

主题：Angular
难度：⭐⭐⭐

Angular Test Bed (ATB)是一个更高级别的Angular Only测试框架，它允许我们轻松测试依赖于 Angular 框架的行为。

我们仍然在 Jasmine 中编写测试并使用 Karma 运行，但现在我们有了一种更简单的方法来创建组件、处理注入、测试异步行为以及与我们的应用程序交互。

TestBed 创建一个动态构造的 Angular 测试模块来模拟 Angular @NgModule。

🔗来源： angular.io

Q8：什么是 Redux，它与 Angular 应用程序有何关系？

主题：Angular
难度：⭐⭐⭐

Redux是一种管理应用程序状态并通过为应用程序状态提供单一真实来源以及应用程序中单向数据变化流来提高应用程序异步可维护性的方法。ngrx/store是 Redux 原则的一种实现。

🔗来源： github.com/WebPredict

Q9：Angular 7 的核心依赖项是什么？

主题：Angular
难度：⭐⭐⭐

核心依赖项有两种类型，RxJS 和 TypeScript。

RxJS 6.3 - Angular 7 使用 RxJS 6.3 版本。与 Angular 6 版本相比，它没有任何变化
TypeScript 3.1 - Angular 7 使用 TypeScript 3.1 版本。它是 Angular 6 2.9 版本的升级版。

🔗资料来源： onlineinterviewquestions.com

Q10：为什么增量 DOM 占用内存较少？

主题：Angular
难度：⭐⭐⭐

每次重新渲染时，虚拟 DOM 都会从头开始创建一整棵树。

另一方面，增量 DOM 如果不改变 DOM，则不需要任何内存来重新渲染视图。我们只需在添加或删除 DOM 节点时分配内存。并且分配的大小与 DOM 更改的大小成正比。

🔗来源： blog.nrwl.io

Q11：控制AOT编译的方式有哪些？

主题：Angular
难度：⭐⭐⭐

您可以通过两种方式控制应用程序的编译

tsconfig.json通过在文件中提供模板编译器选项
通过使用装饰器配置 Angular 元数据

🔗来源： github.com/sudheerj

Q12：什么是激活路线？

主题：Angular
难度：⭐⭐⭐

ActivatedRoute包含与已加载到出口的组件关联的路由信息。它还可用于遍历路由器状态树。ActivatedRoute 将作为路由器服务注入，以访问这些信息。在下面的示例中，您可以访问路由路径和参数：

@Component({
    ...
 })
class MyComponent {
    constructor(route: ActivatedRoute) {
        const id: Observable < string > = route.params.pipe(map(p => p.id));
        const url: Observable < string > = route.url.pipe(map(segments => segments.join('')));
        // route.data includes both `data` and `resolve`
        const user = route.data.pipe(map(d => d.user));
    }
}

🔗来源： github.com/sudheerj

Q13：什么是路由器插座？

主题：Angular
难度：⭐⭐⭐

RouterOutlet是来自路由器库的一个指令，它充当占位符，标记模板中路由器应在哪个位置显示该出口的组件。路由器出口用作组件，

    <router-outlet></router-outlet>
    <!-- Routed components go here -->

🔗来源： github.com/sudheerj

Q14：RxJS 提供了哪些实用功能？

主题：Angular
难度：⭐⭐⭐

RxJS 库还提供以下用于创建和使用可观察对象的实用函数。

将现有的异步操作代码转换为可观察对象
迭代流中的值
将值映射到不同的类型
过滤流
组合多个流

🔗来源： github.com/sudheerj

Q15：什么是多播？

主题：Angular
难度：⭐⭐⭐

多播是指在单次执行中向多个订阅者列表进行广播。让我们演示一下多播功能。

    var source = Rx.Observable.from([1, 2, 3]);
    var subject = new Rx.Subject();
    var multicasted = source.multicast(subject);

    // These are, under the hood, `subject.subscribe({...})`:
    multicasted.subscribe({
      next: (v) => console.log('observerA: ' + v)
    });
    multicasted.subscribe({
      next: (v) => console.log('observerB: ' + v)
    });

    // This is, under the hood, `s

🔗来源： github.com/sudheerj

Q16：什么是订阅？

主题：Angular
难度：⭐⭐⭐

只有当有人订阅 Observable 实例时，它才会开始发布值。因此，你需要调用该实例的subscribe()方法进行订阅，并传递一个观察者对象来接收通知。

让我们举一个创建和订阅简单可观察对象的示例，其中观察者将收到的消息记录到控制台。

    Creates an observable sequence of 5 integers, starting from 1
    const source = range(1, 5);

    // Create observer object
    const myObserver = {
      next: x => console.log('Observer got a next value: ' + x),
      error: err => console.error('Observer got an error: ' + err),
      complete: () => console.log('Observer got a complete notification'),
    };

    // Execute with the observer object and Prints out each item
    myObservable.subscribe(myObserver);
    // => Observer got a next value: 1
    // => Observer got a next value: 2
    // => Observer got a next value: 3
    // => Observer got a next value: 4
    // => Observer got a next value: 5
    // => Observer got a complete notification

🔗来源： github.com/sudheerj

Q17：如何在 Angular 中为每个请求设置标头？

主题：Angular
难度：⭐⭐⭐⭐

您可以提供包装来自 Angular 的原始对象的服务Http。

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';

@Injectable() export class HttpClient {
    constructor(private http: Http) {}

    createAuthorizationHeader(headers: Headers) {
        headers.append('Authorization', 'Basic ' + btoa('username:password'));
    }

    get(url) {
        let headers = new Headers();
        this.createAuthorizationHeader(headers);
        return this.http.get(url, {
            headers: headers
        });
    }

    post(url, data) {
        let headers = new Headers();
        this.createAuthorizationHeader(headers);
        return this.http.post(url, data, {
            headers: headers
        });
    }
}

除了注入Http对象之外，您还可以注入这个对象（HttpClient）。

import { HttpClient } from './http-client';

🔗来源： medium.com

Q18：为什么要使用渲染器方法而不是使用原生元素方法？

主题：Angular
难度：⭐⭐⭐⭐

Angular 是一个平台，浏览器只是我们渲染应用的一种选择。当我们直接访问原生元素时，我们放弃了 Angular 的 DOM 抽象，也失去了在非 DOM 环境中执行的机会，例如：

原生移动端，
原生桌面，
网络工作者
服务器端渲染。

该类Renderer2是 Angular 以服务形式提供的一种抽象，它允许你操作应用的元素而无需直接接触 DOM。我们推荐使用这种方式，因为它可以更轻松地开发那些能够在无法访问 DOM 的环境中渲染的应用，例如在服务器、Web Worker 或原生移动设备上。

🔗资料来源： alligator.io

Q19：Angular 中的 Zone 是什么？

主题：Angular
难度：⭐⭐⭐⭐

NgZone是一个包装器，Zone.js它是一个库，它围绕异步函数创建上下文，以便使其可跟踪。Angular 的变化检测严重依赖于 Zones。

🔗来源： stackoverflow.com

Q20：即时（JIT）编译器一般做什么？

主题：Angular
难度：⭐⭐⭐⭐

JIT 编译器在程序启动后运行，并将代码（通常是字节码或某种虚拟机指令）即时（或称为“即时”）编译为通常更快的形式，通常是主机 CPU 的原生指令集。JIT 可以访问动态运行时信息，而标准编译器则无法访问这些信息，因此可以进行更好的优化，例如内联常用函数。

这与传统编译器形成对比，传统编译器在程序首次运行之前将所有代码编译为机器语言。

🔗来源： stackoverflow.com

Q21：什么是 ngUpgrage？

主题：Angular
难度：⭐⭐⭐⭐

NgUpgrade是由 Angular 团队整合的一个库，我们可以在我们的应用程序中使用它来混合和匹配 AngularJS 和 Angular 组件，并桥接 AngularJS 和 Angular 依赖注入系统。

🔗来源： blog.nrwl.io

Q22：为什么要在 Angular 应用中使用延迟加载模块？

主题：Angular
难度：⭐⭐⭐⭐

要延迟加载功能模块，我们需要使用loadChildren路由配置中的属性来加载它，并且该功能模块不能导入到应用程序模块中。当应用程序规模不断增长时，延迟加载非常有用。在延迟加载模式下，功能模块将按需加载，因此应用程序的启动速度会更快。

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: 'app/customers/customers.module#CustomersModule'
  },
  {
    path: 'orders',
    loadChildren: 'app/orders/orders.module#OrdersModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

🔗资料来源： concretepage.com

Q23：什么是 Ivy Renderer？Angular 7 支持它吗？

主题：Angular
难度：⭐⭐⭐⭐

Angular 视图引擎的目的是将我们编写的模板和组件转换为常规的 HTML 和 JavaScript，以便浏览器能够轻松读取。Ivy 是下一代 Angular 渲染器，继原始编译器（适用于 Angular 2）和 Renderer2（适用于 Angular 4 及更高版本）之后，排在第三。

Angular Ivy 是一个新的 Angular 渲染器，它与我们在主流框架中看到的任何渲染器都截然不同，因为它使用了增量 DOM。目前，它尚未发布。

🔗资料来源： onlineinterviewquestions.com

Q24：什么是增量 DOM？它与虚拟 DOM 有何不同？

主题：Angular
难度：⭐⭐⭐⭐

增量 DOM在 Google 内部使用，它由以下关键思想定义：

每个组件都会被编译成一系列指令。这些指令会创建 DOM 树，并在数据发生变化时进行更新。

React 是第一个使用虚拟 DOM 的主流框架，它由以下关键思想定义：

每个组件每次重新渲染时都会创建一个新的虚拟 DOM 树。React 会将新的虚拟 DOM 树与旧的虚拟 DOM 树进行比较，然后对浏览器 DOM 进行一系列转换，以匹配新的虚拟 DOM 树。

🔗来源： blog.nrwl.io

Q25：AOT 有哪些优势？

主题：Angular
难度：⭐⭐⭐⭐

以下是 AOT 福利列表，

渲染速度更快：浏览器会下载应用程序的预编译版本。因此，它无需编译应用程序即可立即渲染应用程序。
更少的异步请求：它在应用程序 javascript 中内联外部 HTML 模板和 CSS 样式表，从而消除了单独的 ajax 请求。
更小的 Angular 框架下载大小：无需下载 Angular 编译器。因此，它显著降低了应用程序的负载。
尽早检测模板错误：在构建步骤本身期间检测并报告模板绑定错误
更安全：它将 HTML 模板和组件编译成 JavaScript。因此不会有任何注入攻击。

🔗来源： github.com/sudheerj

Q26：我需要引导自定义元素吗？

主题：Angular
难度：⭐⭐⭐⭐

不会。自定义元素在添加到 DOM 时会自动引导（或启动），从 DOM 中移除时也会自动销毁。自定义元素添加到任何页面的 DOM 后，其外观和行为都与其他 HTML 元素一样，并且不需要任何 Angular 方面的特殊知识。

🔗来源： github.com/sudheerj

Q27：纯管道与非纯管道有何区别？

主题：Angular
难度：⭐⭐⭐⭐

仅当 Angular 检测到传递给管道的值或参数发生变化时，才会调用纯管道。例如，原始输入值（字符串、数字、布尔值、符号）的任何更改，或对象引用（日期、数组、函数、对象）的任何更改。
无论值或参数是否发生变化，每个变化检测周期都会调用非纯管道。即，每次击键或移动鼠标时都会经常调用非纯管道。

🔗来源： github.com/sudheerj

Q28：BehaviorSubject 和 Observable 有什么区别？

主题：Angular
难度：⭐⭐⭐⭐⭐

BehaviorSubject 是一种 subject 类型，subject 是一种特殊的可观察对象，因此你可以像其他可观察对象一样订阅消息。BehaviorSubject 的独特功能如下：

它需要一个初始值，因为即使它没有收到next()
订阅后，它会返回 subject 的最后一个值。常规的 Observable 仅在收到onnext
您随时都可以使用该getValue()方法以不可观察的代码检索主题的最后一个值。

与可观察对象相比，主体的独特特征是：

它除了是一个可观察对象之外，还是一个观察者，因此除了订阅主题之外，您还可以向主题发送值。

此外，您还可以使用asobservable()BehaviorSubject 上的方法从行为主题获取可观察对象。

在 Angular 服务中，我将使用 BehaviorSubject 作为数据服务，因为 Angular 服务通常在组件之前初始化，并且行为主题确保使用该服务的组件接收最后更新的数据，即使自组件订阅此数据以来没有新的更新。

🔗来源： medium.com

Q29：Angular 中与 AngularJS“$watch”等效的是什么？

主题：Angular
难度：⭐⭐⭐⭐⭐

解决方案是setES6 中的语法。该set语法将对象属性绑定到一个函数，当尝试设置该属性时，该函数将被调用。

import { Component, Input } from '@angular/core';
@Component({
  selector: 'example-component',
})
export class ExampleComponent {
  public internalVal = null;
  constructor() {}

  @Input('externalVal')
  set updateInternalVal(externalVal) {
    this.internalVal = externalVal;
  }
}

🔗来源： medium.com

Q30：说出 SystemJS 和 WebPack 之间的一些区别？

主题：Angular
难度：⭐⭐⭐⭐⭐

SystemJS：

SystemJS 以其自身的 polyfill 依赖项而闻名
从 npm 导入库/模块并不像使用 WebPack 那么简单
随着依赖项的增加和代码量的增加，JSPM（System.js）的一个致命缺陷暴露出来。它变得极其迟缓。单次刷新可能需要大约 15-20 秒，因为浏览器会加载数百个不同的 JavaScript 文件。
以下情况仍需要 Gulp：
- 最小化
- 嫉妒（嫉妒）
- 为捆绑文件生成唯一的哈希名

WebPack：

更改现在以毫秒为单位显示；Webpack 的开发服务器专为速度而设计。它不仅支持增量构建，还能直接从内存中提供服务
您可以轻松地从 npm 导入库（例如 Bootstrap 或 Foundation），而不必担心它们在 node_modules 中的确切路径
无需 Gulp。Webpack 本身会负责 SystemJS 中所有需要 Gulp 完成的任务
Webpack 似乎是为大型应用程序从头开始设计的，并且在开发过程中有所体现

🔗来源： vteams.com

Q31: 即时编译 (JiT) 与提前编译 (AoT) 的区别。解释一下它们的区别。

主题：Angular
难度：⭐⭐⭐⭐⭐

JIT——在执行 TypeScript 时及时编译它：

在浏览器中编译。
每个文件单独编译。
更改代码后和重新加载浏览器页面之前无需构建。
适合本地开发。

AOT——在构建阶段编译 TypeScript：

由机器本身通过命令行进行编译（更快）。
所有代码一起编译，在脚本中内联 HTML/CSS。
无需部署编译器（Angular 大小的一半）。
更安全，原始来源不公开。
适用于生产构建。

🔗来源： stackoverflow.com

Q32：为什么angular需要使用url段？

主题：Angular
难度：⭐⭐⭐⭐⭐

UrlSegment是 URL中两个斜杠之间的部分。它包含与该段相关的路径和矩阵参数。

矩阵参数与路径段绑定，而查询参数与 URL 绑定。它们具有不同的语义。

考虑：

localhost:3000/heroes;id=15;foo=foo/bar/baz
// instead of localhost:3000/heroes/bar/baz?id=15&foo=foo

这些参数与 heroes和 URL 绑定。当你访问 route.url 时，你会看到以下内容：

this.route.url.subscribe((url: UrlSegment[]) => {
  let heroes = url[0];
  let heroesMatrix = heroes.parameters();
  // heroes should contain id=15, foo=foo
  let bar = url[1].path; // 15
  let baz = url[2].path; //foo
})

对于矩阵参数，您还可以订阅 params，而不是将它们从 url 中剥离出来。

this.paramSubscription = this.activeRoute.params.subscribe(params => {
  const bar = params['bar'];
  const baz = params['baz'];
});

对于 Angular 应用来说，真正关心这些参数的只有我们开发者。用户并不关心。它不是一个 REST API，我们不应该遵循众所周知的语义。对于我们的 Angular 应用来说，只要我们开发者知道如何使用参数（无论是矩阵还是查询），使用哪个参数都无所谓。

🔗来源： https://stackoverflow.com

Q33：为什么 Google 团队选择增量 DOM 而不是虚拟 DOM？

主题：Angular
难度：⭐⭐⭐⭐⭐

他们的目标只有一个：应用程序必须在移动设备上表现良好。这主要意味着优化两件事：bundle 大小和内存占用。

为了实现两个目标：

渲染引擎本身必须是可摇树的
渲染引擎必须具有较低的内存占用

🔗来源： blog.nrwl.io

Q34：为什么增量 DOM 是可摇树的？

主题：Angular
难度：⭐⭐⭐⭐⭐

使用增量 DOM 时，框架不会解释组件。相反，组件会引用指令。如果组件未引用特定指令，则永远不会使用。由于我们在编译时就知道这一点，因此我们可以从 bundle 中省略未使用的指令。

虚拟 DOM 需要一个解释器。在编译时，我们无法确定解释器的哪些部分是必需的，哪些部分是不需要的，所以我们必须把整个过程都交给浏览器。

🔗来源： blog.nrwl.io

Q35：Angular 7 有什么新功能？

主题：Angular
难度：⭐⭐⭐⭐⭐

Angular Elements——现在支持使用Web 标准对自定义元素进行内容投影。
Angular 7.0 应用程序将使用 Angular CLI 的 Bundle Budget 功能。如果应用程序包大小超出预定义的限制，该功能将向开发人员发出警告。
Angular Material 的组件开发工具包 (CDK) 也获得了一些新功能
- 虚拟滚动
- 拖放
mat-form-field 现在将支持使用原生 select 元素。这将增强应用程序的性能和可用性。
Angular 7.0 已更新其依赖项以支持 Typescript 3.1、RxJS 6.3 和 Node 10。
为新应用设定预算
需要澄清的是，Angular** Ivy 渲染器**尚未发布。

🔗来源： medium.freecodecamp.org

感谢🙌的阅读，祝你面试顺利！
如果喜欢，请分享给你的开发者同事！
更多 FullStack 面试问答，请访问👉 www.fullstack.cafe

文章来源：https://dev.to/fullstackcafe/35-top-angular-7-interview-questions-to-crack-in-2019-598g