Angular 2 面试问题（Angular 2 Interview Questions）

优质

小牛编辑

129浏览

2023-12-01

亲爱的读者们，这些Angular 2 Interview Questions专门设计用于让您熟悉在面试Angular 2时可能遇到的问题的本质。根据我的经验，好的面试官在你的面试中几乎不打算问任何特定的问题，通常问题从这个主题的一些基本概念开始，然后他们继续基于进一步的讨论和你回答的内容:

什么是Angular 2？

AngularJS是一个构建大规模和高性能Web应用程序的框架，同时使它们易于维护。以下是AngularJS框架的功能。

Components - 早期版本的Angular有一个控制器的焦点，但现在已经将重点转移到控制器上的组件。组件有助于将应用程序构建到许多模块中。这有助于在一段时间内更好地维护应用程序。
TypeScript - 较新版本的Angular基于TypeScript。这是JavaScript的超集，由Microsoft维护。
Services - 服务是一组可由应用程序的不同组件共享的代码。因此，例如，如果您有一个从数据库中选择数据的数据组件，您可以将其作为可以跨多个应用程序使用的共享服务。

Angular 2的主要组成部分是什么？

Angular 2具有以下组件 -

Modules - 用于将应用程序分解为逻辑代码片段。每段代码或模块都旨在执行单个任务。
Component - 可用于将模块组合在一起。
Templates - 用于定义Angular JS应用程序的视图。
Metadata - 这可用于向Angular JS类添加更多数据。
Service - 用于创建可在整个应用程序中共享的组件。

解释Angular 2中的模块。

Angular JS中使用模块在您的应用程序中设置逻辑边界。因此，您可以将所有内容构建到单独的模块中，以分离应用程序的功能，而不是将所有内容编码到一个应用程序中。模块由以下部分组成 -

Bootstrap array - 用于告诉Angular JS需要加载哪些组件，以便可以在应用程序中访问其功能。一旦将组件包含在引导程序数组中，就需要声明它们，以便它们可以在Angular JS应用程序中的其他组件中使用。
Export array - 用于导出组件，指令和管道，然后可以在其他模块中使用。
Import array - 与导出数组一样，导入数组可用于从其他Angular JS模块导入功能。

解释Angular 2中的组件。

每个应用程序都包含组件。每个组件都是应用程序功能的逻辑边界。您需要具有分层服务，这些服务用于跨组件共享功能。以下是组件的解剖结构。一个组成部分包括 -

Class - 这类似于C或Java类，它由属性和方法组成。
Metadata - 用于装饰类并扩展类的功能。
Template - 用于定义应用程序中显示的HTML视图。

什么是Angular 2指令？用例子解释。

指令是一个自定义HTML元素，用于扩展HTML的强大功能。 Angular 2具有以下指令，这些指令作为BrowserModule模块的一部分进行调用。

ngIf -
如果计算结果为true，则ngif元素用于向HTML代码添加元素，否则不会将元素添加到HTML代码中。
语法 (Syntax)
```
*ngIf = 'expression' 
```
如果表达式的计算结果为true，则会添加相应的内容，否则不会添加元素。
ngFor -
ngFor元素用于基于For循环条件的元素。
语法 (Syntax)
```
*ngFor = 'let variable of variablelist' 
```
变量是一个临时变量，用于显示变量列表中的variablelist 。

你将如何处理Angular 2应用程序中的错误？

Angular 2应用程序可以选择错误处理。这是通过包含ReactJS catch库然后使用catch函数来完成的。

catch函数包含Error Handler函数的链接。
在错误处理程序函数中，我们将错误发送到控制台。我们还将错误抛回主程序，以便继续执行。
现在，每当您收到错误时，它都会被重定向到浏览器的错误控制台。

什么是路由？

路由有助于根据用户在主页面上选择的选项将用户引导至不同的页面。因此，根据他们选择的选项，将向用户呈现所需的角度组件。

什么是CLI？

命令行界面（CLI）可用于创建我们的Angular JS应用程序。它还有助于为应用程序创建单元和端到端测试。

什么是依赖注入？用例子解释。

依赖注入是在运行时添加组件功能的能力。让我们看一个示例和用于实现依赖注入的步骤。

Step 1 - 创建一个具有可注入装饰器的单独类。可注入装饰器允许在任何Angular JS模块中注入和使用此类的功能。

@Injectable() 
   export class classname {  
}

Step 2 - 接下来在appComponent模块或您要使用该服务的模块中，您需要将其定义为@Component装饰器中的提供程序。

@Component ({  
   providers : [classname] 
})

解释tsconfig.json文件。

此文件用于提供有关用于Angular JS项目的TypeScript的选项。

{ 
   "compilerOptions": { 
      "target": "es5", 
      "module": "commonjs", 
      "moduleResolution": "node", 
      "sourceMap": true, 
      "emitDecoratorMetadata": true, 
      "experimentalDecorators": true, 
      "lib": [ "es2015", "dom" ], 
      "noImplicitAny": true, 
      "suppressImplicitAnyIndexErrors": true 
   } 
}

以下是关于上述代码的一些要点。

编译的目标是es5，这是因为大多数浏览器只能理解ES5Typescript。
sourceMap选项用于生成Map文件，这在调试时很有用。因此，在开发过程中保持此选项为真。
Angular JS装饰器需要“emitDecoratorMetadata”:true和“experimentalDecorators”:true。如果不到位，Angular JS应用程序将无法编译。

解释package.json文件。

此文件包含有关Angular 2项目的信息。以下是文件中的典型设置。

{ 
   "name": "angular-quickstart", 
   "version": "1.0.0", 
   "description": "QuickStart package.json from the documentation, 
      supplemented with testing support", 
   "scripts": { 
      "build": "tsc -p src/", 
      "build:watch": "tsc -p src/ -w", 
      "build:e2e": "tsc -p e2e/", 
      "serve": "lite-server -c=bs-config.json", 
      "serve:e2e": "lite-server -c=bs-config.e2e.json", 
      "prestart": "npm run build", 
      "start": "concurrently \"npm run build:watch\" \"npm run serve\"", 
      "pree2e": "npm run build:e2e", 
      "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --killothers --success first", 
      "preprotractor": "webdriver-manager update", 
      "protractor": "protractor protractor.config.js", 
      "pretest": "npm run build", 
      "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"", 
      "pretest:once": "npm run build", 
      "test:once": "karma start karma.conf.js --single-run", 
      "lint": "tslint ./src/**/*.ts -t verbose" 
   }, 
   "keywords": [], 
   "author": "", 
   "license": "MIT", 
   "dependencies": { 
      "@angular/common": "<2.4.0", 
      "@angular/compiler": "<2.4.0", 
      "@angular/core": "<2.4.0",
      "@angular/forms": "<2.4.0", 
      "@angular/http": "<2.4.0", 
      "@angular/platform-browser": "<2.4.0", 
      "@angular/platform-browser-dynamic": "<2.4.0", 
      "@angular/router": "<3.4.0",  
      "angular-in-memory-web-api": <0.2.4", 
      "systemjs": "0.19.40", 
      "core-js": "^2.4.1", 
      "rxjs": "5.0.1", 
      "zone.js": "^0.7.4" 
   }, 
   "devDependencies": { 
      "concurrently": "^3.2.0", 
      "lite-server": "^2.2.2", 
      "typescript": "<2.0.10",  
      "canonical-path": "0.0.2", 
      "tslint": "^3.15.1", 
      "lodash": "^4.16.4", 
      "jasmine-core": "<2.4.1", 
      "karma": "^1.3.0", 
      "karma-chrome-launcher": "^2.0.0", 
      "karma-cli": "^1.0.1", 
      "karma-jasmine": "^1.0.2", 
      "karma-jasmine-html-reporter": "^0.2.2", 
      "protractor": <4.0.14", 
      "rimraf": "^2.5.4",  
      "@types/node": "^6.0.46", 
      "@types/jasmine": "2.5.36" 
   }, 
   "repository": {} 
}

关于上述代码的一些要点 -

有两种类型的依赖项，首先是依赖项，然后是dev依赖项。开发过程中需要开发者，运行应用程序需要其他人。
“build:watch”:“tsc -p src/-w”命令用于通过查找typescript文件中的更改来在后台编译Typescript。

解释systemjs.config.json文件。

该文件包含Angular JS应用程序所需的系统文件。这将加载所有必需的脚本文件，而无需向html页面添加脚本标记。典型文件将具有以下代码。

/** 
 * System configuration for Angular samples 
 * Adjust as necessary for your application needs. 
*/ 
(function (global) { 
   System.config({ 
      paths: { 
         // paths serve as alias 
         'npm:': 'node_modules/' 
      }, 
      // map tells the System loader where to look for things 
      map: { 
         // our app is within the app folder 
         app: 'app',  
         // angular bundles 
         '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
         '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
         '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
         '@angular/platform-browser': 'npm:@angular/platformbrowser/bundles/platform-browser.umd.js', 
         '@angular/platform-browser-dynamic': 'npm:@angular/platform-browserdynamic/bundles/platform-browser-dynamic.umd.js', 
         '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
         '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
         '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',  
         // other libraries 
         'rxjs':  'npm:rxjs', 
         'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/inmemory-web-api.umd.js' 
      }, 
      // packages tells the System loader how to load when no filename and/or no extension 
      packages: { 
         app: { 
            defaultExtension: 'js' 
         }, 
         rxjs: { 
            defaultExtension: 'js' 
         } 
      } 
   }); 
})(this);

关于上述代码的一些要点 -

'npm:':'node_modules /'告诉我们项目中所有npm模块所在的位置。
app:'app'的映射告诉我们加载所有应用程序文件的文件夹。

解释app.module.ts文件。

以下代码将出现在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 { }

让我们详细介绍代码的每一行。

import语句用于从现有模块导入功能。因此，前3个语句用于将NgModule，BrowserModule和AppComponent模块导入此模块。
NgModule装饰器稍后用于定义导入，声明和引导选项。
对于任何基于Web的角度应用程序，默认情况下都需要BrowserModule。
bootstrap选项告诉Angular在应用程序中引导哪个Component。

如何将输入转换为全小写？

小写过滤器用于将输入转换为全部小写。

在下面的示例中，我们使用管道字符向表达式添加了小写过滤器。在这里，我们添加了小写过滤器，以全小写字母打印学生姓名。

<div> 
   The name of this Tutorial is {{TutorialName}}  
   The first Topic is {{appList[0] | lowercase}} 
   The second Topic is {{appList[1] | lowercase}} 
   The third Topic is {{appList[2]| lowercase}} 
</div>

如何将输入转换为全部大写？

大写过滤器用于将输入转换为全大写。

在下面的示例中，我们使用管道字符向表达式添加了大写过滤器。在这里，我们添加了大写过滤器，以全大写字母打印学生姓名。

<div> 
   The name of this Tutorial is {{TutorialName}}  
   The first Topic is {{appList[0] | uppercase}} 
   The second Topic is {{appList[1] | uppercase}} 
   The third Topic is {{appList[2]| uppercase}} 
</div>

你将如何从字符串中获取子字符串？

切片过滤器用于切割输入字符串中的一段数据。

在下面的示例中，我们使用管道字符向表达式添加了切片过滤器。这里将根据开始和结束位置对属性值进行切片。

<div> 
   The name of this Tutorial is {{TutorialName}}  
   The first Topic is {{appList[0] | slice:1:2}} 
   The second Topic is {{appList[1] | slice:1:3}} 
   The third Topic is {{appList[2]| slice:2:3}} 
</div>

你如何将字符串转换为日期？

日期过滤器用于将输入字符串转换为日期格式。

在下面的示例中，我们使用管道字符向表达式添加了日期过滤器。此属性值将转换为日期格式。

<div> 
   The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}
</div>

如何将字符串转换为货币？

货币过滤器用于将输入字符串转换为货币格式。

在下面的示例中，我们使用管道字符向表达式添加了货币过滤器。此处的属性值将转换为货币格式。

<div> 
   The currency of this Tutorial is {{newValue | currency}}
</div>

你如何将字符串转换为百分比？

百分比过滤器用于将输入字符串转换为百分比格式。

在下面的示例中，我们使用管道字符向表达式添加了百分比过滤器。此属性值将转换为百分比格式。

<div> 
   The percentage of this Tutorial is {{newValue | percent}}
</div>

在Angular 2 Application Lifecycle中调用ngOnChanges事件时？

当数据绑定属性的值更改时，将调用此方法。

在Angular 2应用程序生命周期中调用ngOnInit事件时？

只要在Angular首次显示数据绑定属性后初始化指令/组件，就会调用此方法。

在Angular 2应用程序生命周期中调用ngDoCheck事件？

这是用于检测并对Angular不能或不会自己检测到的更改进行操作。

在Angular 2 Application Lifecycle中调用ngAfterContentInit事件时？

在Angular将外部内容投影到组件视图中之后，将调用此方法。

在Angular 2 Application Lifecycle中调用ngAfterContentChecked事件时？

在Angular检查投影到组件中的内容之后，将调用此方法。

在Angular 2 Application Lifecycle中调用ngAfterViewInit事件时？

在Angular初始化组件的视图和子视图之后，将在响应中调用此方法。

在Angular 2 Application Lifecycle中调用ngAfterViewChecked事件时？

在Angular检查组件的视图和子视图后，将在响应中调用此方法。

在Angular 2应用程序生命周期中调用ngOnDestroy事件时？

这是在Angular破坏指令/组件之前的清理阶段。

Angular 2 面试问题（Angular 2 Interview Questions）

语法 (Syntax)

语法 (Syntax)