史上最全！Angular 7面试题及其最佳答案

下面列出了Angular 7面试中最常见的问题和答案。

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

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

Angular7是Angular1.0的完整重写。它支持双向数据绑定, 以及其他一些功能, 例如ng更新, ng添加, Angular元素, Angular材质+ CDK组件, Angular材质入门组件, CLI工作区, 库支持, Tree Shakable Providers, 动画性能改进和RxJS v6等等

2)什么是Angular框架？

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

该框架的主要功能包括：声明性模板, 依赖项注入, 端到端工具等。这些功能使Angular中的Web开发变得容易。

3)AngularJS和Angular有什么区别？

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

AngularJS和Angular之间的区别：

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

结构化指令用于通过删除和添加DOM元素来更改DOM布局。这些指令在更改视图结构方面要好得多。结构指令的示例是NgFor和Nglf。

属性指令用作元素的特征。例如, 模板”语法”指南中的内置NgStyle之类的指令是属性指令。

5)NgModule中的”声明”, “提供者”和”导入”之间有什么区别？

NgModule中的声明之间的区别”, “提供者”和”导入”：

• 声明用于使当前模块中的指令(包括组件和管道)可用于当前模块中的其他指令。指令, 组件或管道的选择器只有在声明或导入时才与HTML匹配。
• 提供者用于使DI知道服务和价值。它们被添加到根范围, 并且被注入到其他具有它们依赖关系的服务或指令中。提供程序的一种特殊情况是延迟加载的模块, 它们具有自己的子注入器。默认情况下, 仅将延迟加载的模块的提供程序提供给该延迟加载的模块(不像其他模块那样提供整个应用程序)。
• import使其他模块的导出声明在当前模块中可用。

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

Angular的关键组件：

组件：组件是角度应用程序的基本构建块, 用于控制HTML视图。

模块：模块是有角度的基本构建块的集合, 例如组件, 指令, 服务等。应用程序分为逻辑部分, 每段代码称为”模块”, 用于执行单个任务。

模板：模板用于表示Angular应用程序的视图。

服务：用于创建可以在整个应用程序之间共享的组件。

元数据：可用于向Angular类添加更多数据。

7)解释Angular的体系结构概述。

Angular是用于开发移动和Web应用程序的最受欢迎的Web开发框架。它使用称为IONIC的跨平台移动开发, 这就是为什么它不仅限于Web应用程序。

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

• 零件
• 范本
• 元数据
• 数据绑定
• 指令
• 服务
• 依赖注入

Angular应用程序的基本构建块是NgModules, 它为组件提供编译上下文。 Angular应用程序由一组NgModule定义, 并且始终至少具有启用引导的根模块以及更多功能模块。

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

NgModules使开发人员可以将应用程序组织成相互连接的功能块。

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

• 声明：用于声明应用程序组件。
• 导入：每个应用程序都必须导入BrowserModule才能在浏览器中运行该应用程序。
• 提供者：没有什么可以开始的。
• Bootstrap：这是Angular创建并插入到index.html主机网页中的根AppComponent。

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

你可以使用以下命令将Angular 6更新为Angular 7：

ng update @angular/cli @angular/core

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

在Angular 7中, UrlSegment接口表示单个URL段, 构造函数, 属性和方法, 如下所示：

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

UrlSegment是两个斜线之间URL的一部分, 它包含与该段关联的路径和矩阵参数。

10)什么是Angular 7中的Bootstrap(ng 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)Angular7中的指令是什么？

在Angular7中, 指令用于将行为添加到现有DOM元素或现有组件实例中。

例如

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

现在, 此指令以绿色背景扩展了HTML元素的行为, 如下所示：

Highlight me!

12)Angular7中有哪些组件？

组件是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)是带有模板的指令。组件和指令之间的一些主要区别是：

14)Angular7中的模板是什么？

模板是一个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)什么是模块？

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

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

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装饰器具有三个选项：

• 导入选项用于导入其他从属模块。默认情况下, 任何基于Web的角度应用程序都需要BrowserModule。
• 声明选项用于定义相应模块中的组件。
• bootstrap选项告诉Angular在应用程序中要引导哪个组件。

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

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

• Angular7在新更新中显示出优雅的外观。
• 它使用滚动包提供虚拟滚动 .
• 通过使用@ angular / cdk / drag-drop模块, 它可以帮助你使用拖放属性。
• 在Angular7中, 库会使用Material Design的更新版本自动对其自身进行更改。
• 如果未初始化属性, Angular7将为@Output提供更好的错误处理。
• Angular7为Node v10提供了额外的支持。

Angular7的其他一些功能是：

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

@ angular / fire：这是npm的最新更新, 并且是Angular7的第一个稳定版本。

NativeScript：它可以帮助你制作一个针对Web和已安装的移动设备构建的项目。

StackBlitz：StackBlitz 2.0现在已发布, 其中包括Angular Language Service以及选项卡式编辑等更多功能。

AngularJS基于MVC架构。

它使用JavaScript来构建应用程序。

它遵循控制器的概念。

它不是移动友好的框架。

在AngularJS中创建SEO友好应用程序非常困难。

如果注册组件, 则必须使用@Component元数据注释

组件用于将应用程序分解为较小的组件。

组件用于创建UI小部件。

每个DOM元素只能存在一个组件。

@View装饰器或templateurl / template是必需的