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

文章图片
下面列出了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之间的区别：

AngularJS	Angular
Angular基于服务/控制器。
它使用TypeScript生成应用程序。
它遵循基于组件的UI方法。
这是一个移动友好的框架。
通过使用Angular, 你可以轻松创建SEO友好应用程序。

4)Angular 7中的结构指令和属性指令有什么区别？
【史上最全！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)是带有模板的指令。组件和指令之间的一些主要区别是：

Component	Directive
如果注册指令, 则必须使用@Directive元数据注释
指令用于设计可重复使用的组件。
指令用于向现有DOM元素添加行为。
每个DOM元素可以使用许多指令。
指令不使用View。

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是必需的