Angular 7面试题

2025年3月21日 | 阅读 7 分钟

下面列出了一些最常问的Angular 7面试问题及答案。

1) Angular 7 是什么？它与 AngularJS 有何不同？

Angular7 是 Angular 的最新版本。AngularJS 是 Angular 的第一个版本，也称为 Angular 1.0。

Angular7 是对 Angular 1.0 的完全重写。它支持双向数据绑定，以及 ng update、ng add、Angular Elements、Angular Material + CDK 组件、Angular Material 初始组件、CLI Workspaces、库支持、Tree Shakable Providers、动画性能改进和 RxJS v6 等功能。

2) 什么是 Angular 框架？

Angular 是一个基于 TypeScript 的开源 Web 框架和平台。它用于构建 Web/移动和桌面应用程序。

该框架的主要特点包括：声明式模板、依赖注入、端到端工具等。这些特性使 Angular 的 Web 开发更加容易。

3) AngularJS 和 Angular 有什么区别？

Angular 是对 AngularJS 的完全重写。它是一个基于组件的框架，其中应用程序是独立组件的树。

AngularJS 和 Angular 的区别

AngularJS	Angular
AngularJS 基于 MVC 架构。	Angular 基于 Service/Controller。
它使用 JavaScript 构建应用程序。	它使用 TypeScript 构建应用程序。
它遵循控制器概念。	它遵循基于组件的 UI 方法。
它不是一个移动友好的框架。	它是一个移动友好的框架。
在 AngularJS 中创建 SEO 友好型应用程序非常困难。	使用 Angular，您可以轻松创建 SEO 友好型应用程序。

4) Angular 7 中的结构指令和属性指令有什么区别？

结构指令用于通过删除和添加 DOM 元素来更改 DOM 布局。这些指令在更改视图结构方面效果更好。结构指令的例子有 NgFor 和 Nglf。

属性指令用作元素的特征。例如，模板语法指南中内置的 NgStyle 指令就是一个属性指令。

5) NgModule 中的 "declarations"、"providers" 和 "import" 有什么区别？

NgModule 中的 "declarations"、"providers" 和 "import" 的区别

declarations 用于使当前模块中的指令（包括组件和管道）对当前模块中的其他指令可用。只有当指令、组件或管道被声明或导入时，它们的选择器才能与 HTML 匹配。
providers 用于使服务和值对 DI 可知。它们被添加到根作用域，并被注入到具有它们作为依赖的其他服务或指令中。Providers 的一个特殊情况是惰性加载的模块，它们有自己的子注入器。默认情况下，惰性加载模块的 Providers 只提供给该惰性加载模块（而不是整个应用程序，如其他模块）。
import 使其他模块的导出声明在当前模块中可用。

6) Angular 的关键组件是什么？

Angular 的关键组件

组件 (Components): 组件是 Angular 应用程序的基本构建块，用于控制 HTML 视图。

模块 (Modules): 模块是 Angular 基本构建块的集合，如组件、指令、服务等。应用程序被划分为逻辑块，每个代码块称为一个“模块”，用于执行单一任务。

模板 (Templates): 模板用于表示 Angular 应用程序的视图。

服务 (Services): 它用于创建可在整个应用程序中共享的组件。

元数据 (Metadata): 可用于向 Angular 类添加更多数据。

7) 解释 Angular 的架构概述。

Angular 是最流行的 Web 开发框架，用于开发移动和 Web 应用程序。它使用跨平台移动开发技术 IONIC，因此它不仅限于 Web 应用。

Angular 应用程序有 7 个主要构建块。

组件
模板
元数据
数据绑定
指令
服务
依赖注入

Angular 应用程序的基本构建块是 NgModules，它们为组件提供编译上下文。Angular 应用由一组 NgModules 定义，并且总是至少有一个根模块用于引导，以及许多功能模块。

组件定义模板视图
组件使用服务

NgModules 使开发人员能够将应用程序组织成互联的功能块。

CLI 生成的最小 "AppModule" 的 NgModule 属性如下：

Declarations: 用于声明应用程序组件。
Imports: 应用程序必须导入 BrowserModule 才能在浏览器中运行。
Providers: 开始时没有。
Bootstrap: 这是 Angular 创建并插入到 index.html 主网页中的根 AppComponent。

8) 如何将 Angular 6 更新到 Angular 7？

您可以使用以下命令将 Angular 6 更新到 Angular 7：

9) Angular 7 中的 UrlSegment 接口是什么？

在 Angular 7 中，UrlSegment 接口表示一个单独的 URL 段，包含构造函数、属性和方法，如下所示：

class UrlSegment {
constructor(path: string, parameters: {...})
path: string
parameters: {...}
toString(): string
}

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

10) Angular 7 中的 Do Bootstrap (ng Do Bootstrap) 是什么？

ng Do Bootstrap 是 Angular 7 中新增的生命周期钩子，Do Bootstrap 是一个接口。

示例

//ng Do Bootstrap - Life-Cycle Hook Interface
classApp Module implements Do Bootstrap {
ng Do Bootstrap(appRef: ApplicationRef) {
appRef.bootstrap(AppComponent);
  }
}

11) Angular 7 中的指令是什么？

在 Angular 7 中，指令用于向现有 DOM 元素或现有组件实例添加行为。

例如

import { Directive, ElementRef, Input } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'green';
    }
}

现在，此指令将 HTML 元素行为扩展为具有绿色背景，如下所示：

高亮我！

12) Angular 7 中的组件是什么？

组件是 Angular 应用的基本构建块，形成树状结构。组件是指令的子集，但与指令不同，组件始终具有模板，并且在模板中每个元素只能实例化一个组件。

例如

import { Component } from '@angular/core';
@Component ({
   selector: 'my-app',
   template: ` <div>
      <h1>{{title}}</h1>
      <div>Learn Angular6 with examples</div>
   </div> `,
})
export class AppComponent {
   title: string = 'Welcome to Angular world';
}

13) 组件和指令有什么区别？

组件 (@component) 是带有模板的指令。组件和指令之间的一些主要区别是：

组件	指令
如果您注册一个组件，您必须使用 @Component 元数据注解。	如果您注册一个指令，您必须使用 @Directive 元数据注解。
组件用于将应用程序分解成更小的组件。	指令用于设计可重用组件。
组件用于创建 UI 小部件。	指令用于向现有 DOM 元素添加行为。
每个 DOM 元素只能存在一个组件。	每个 DOM 元素可以使用多个指令。
@View 装饰器或 templateUrl/template 是必需的。	指令不使用 View。

14) Angular 7 中的模板是什么？

模板是一个 HTML 视图，您可以通过将控件绑定到 Angular 组件的属性来显示数据。您可以将组件的模板存储在两个位置之一。您可以使用 template 属性内联定义它，或者在单独的 HTML 文件中定义模板，并在 @Component 装饰器的 templateUrl 属性中使用它来链接。

例如

使用模板语法的内联模板

import { Component } from '@angular/core';
@Component ({
   selector: 'my-app',
   template: '
      <div>
         <h1>{{title}}</h1>
         <div>Learn Angular</div>
      </div>
   '
})
export class AppComponent {
   title: string = 'Hello World';
}

使用单独的模板文件，例如 app.component.html

import { Component } from '@angular/core';
@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})
export class AppComponent {
   title: string = 'Hello World';
}

15) 什么是模块？

模块是应用程序中的逻辑边界。应用程序被划分为单独的模块，以分离应用程序的功能。

例如： app.module.ts 根模块，使用 @NgModule 装饰器声明。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
@NgModule ({
   imports:      [ BrowserModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

在这里，NgModule 装饰器有三个选项：

imports 选项用于导入其他依赖模块。任何基于 Web 的 Angular 应用程序默认都需要 BrowserModule。
declarations 选项用于在相应模块中定义组件。
bootstrap 选项告诉 Angular 要引导哪个组件来启动应用程序。

16) Angular 7 中添加了哪些新功能？

以下是 Angular 7 中添加的新功能列表：

Angular 7 在新更新中展现了优雅的外观。
它通过使用滚动包提供了虚拟滚动。.
它通过使用 @angular/cdk/drag-drop 模块，方便您使用拖放属性。
在 Angular 7 中，库会随着 Material 设计的更新版本自动进行自身更改。
Angular 7 为 @Output 提供了更好的错误处理，以防属性未初始化。
Angular 7 添加了对 Node v10 的支持。

更多 Angular 7 功能包括：

Angular Console: 这是一个可下载的控制台，用于在本地计算机上启动和运行 Angular 项目。

@angular/fire: 这是 npm 上的最新更新，也是 Angular 7 的第一个稳定版本。

NativeScript: 它使您能够创建一个项目，该项目可以同时构建 Web 应用和已安装的移动应用。

StackBlitz: StackBlitz 2.0 已发布，其中包括 Angular Language Service 和更多功能，如标签式编辑。

Angular 7面试题

1) Angular 7 是什么？它与 AngularJS 有何不同？

2) 什么是 Angular 框架？

3) AngularJS 和 Angular 有什么区别？

4) Angular 7 中的结构指令和属性指令有什么区别？

5) NgModule 中的 "declarations"、"providers" 和 "import" 有什么区别？

6) Angular 的关键组件是什么？

7) 解释 Angular 的架构概述。

8) 如何将 Angular 6 更新到 Angular 7？

9) Angular 7 中的 UrlSegment 接口是什么？

10) Angular 7 中的 Do Bootstrap (ng Do Bootstrap) 是什么？

11) Angular 7 中的指令是什么？

12) Angular 7 中的组件是什么？

13) 组件和指令有什么区别？

14) Angular 7 中的模板是什么？

15) 什么是模块？

16) Angular 7 中添加了哪些新功能？

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

所有面试

公司面试

Technical Interview

Web Interview

PHP面试

.Net面试

Java Interview

Database Interview

Angular 7面试题

1) Angular 7 是什么？它与 AngularJS 有何不同？

2) 什么是 Angular 框架？

3) AngularJS 和 Angular 有什么区别？

4) Angular 7 中的结构指令和属性指令有什么区别？

5) NgModule 中的 "declarations"、"providers" 和 "import" 有什么区别？

6) Angular 的关键组件是什么？

7) 解释 Angular 的架构概述。

8) 如何将 Angular 6 更新到 Angular 7？

9) Angular 7 中的 UrlSegment 接口是什么？

10) Angular 7 中的 Do Bootstrap (ng Do Bootstrap) 是什么？

11) Angular 7 中的指令是什么？

12) Angular 7 中的组件是什么？

13) 组件和指令有什么区别？

14) Angular 7 中的模板是什么？

15) 什么是模块？

16) Angular 7 中添加了哪些新功能？

相关帖子

2025年顶尖10项Pure.CSS面试题

CoffeeScript面试题 (2025)

Perl面试题

2025年顶尖30+CSS面试题及答案

2025年顶尖50+Node.js面试题及答案

Dojo面试题 (2025)

XQuery面试题 (2025)

2025年顶尖25项SASS面试题

2025年顶尖40+SVG面试题

Ember.js面试题 (2025)

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器