1. 在哪个目录中，所有外部模块和文件都存储在Angular 4中？

Angular4将所有外部模块和文件存储在node_modules目录中。

2. 如何在Angular 4中包含外部CSS？

要在Angular 4中包含外部CSS，请打开.angular-cli.json并在styles数组中添加css文件路径。

3. Angular中的路由是什么？

当想要浏览应用程序的不同页面但还希望应用程序是单页面应用程序时，可以使用ngRoute模块。

此ngRoute模块可浏览应用程序的不同页面，而无需重新加载整个应用程序。 应包含角度js路由模块，以使您的应用程序为路由做好准备。

ngRoute作为应用程序中的依赖项添加。 路由引擎捕获用户请求的特定URL，并根据定义的路由规则呈现视图。

4. Angular4中的组件装饰器是什么？

在开发版本2及更高版本的角度框架时，装饰器是核心概念。 它很快就会成为JavaScript的核心语言功能。 在Angular4中，装饰器被广泛使用并且还用于编译代码。有4种不同类型的装饰器：

类装饰器属性装饰器方法装饰器参数装饰器

装饰器是一个使用前缀@符号调用的函数，后面紧跟一个类，参数，方法或属性。 装饰器返回相同的东西，它作为输入给出，但是以增强的形式

5. 编写CLI命令以在Angular4中生成组件。

组件只是简单的类，在组件装饰器的帮助下声明为组件。在Angular CLI命令的帮助下，创建已经可以工作的应用程序变得很容易。 “Ng generate”用于生成组件，路由，服务和管道。 借助此CLI命令还可以创建简单的测试shell。 要在CLI命令的帮助下生成angular4中的组件，需要遵循以下语法 - ng generate component component_name;它生成组件并将组件添加到模块声明中

6. angular4的组件目录结构是什么样的？

以下是angular4组件目录结构和模块中存在的元素 - module.ts - 在此，声明了angular模块。 使用@NgModule装饰器初始化angular应用程序的不同方面。AppComponent也在其中声明。components.ts - 它只是以angular定义组件，这也是定义app-root扇区的地方。 title属性也在组件中声明。component.html-它是应用程序的模板文件，代表组件的可视部分。

7. 请使用一个例子解释说明ngFor指令。

ngFor指令为给定迭代器的每个元素实例化一个模板。 ngFor指令的不同局部变量可用于迭代。 ngFor指令甚至可以与HTML元素一起使用。 它还在DOM中执行各种更改。 在ngFor指令的帮助下，可以将多个导出值别名化为局部变量。 它允许在HTML模板中构建数据表示列表和表。 以下是借助HTML的ngFor指令示例：({hero.name})

8. 请解释angular中的属性绑定或单向绑定。

基本上，属性绑定意味着从组件类传递数据并在视图中设置给定元素的值。 它是一种单向绑定，其中数据从组件传递到类。 它允许控制从组件到类的元素属性值。 angular 的属性绑定可以通过三种方式进行：只要定义的值是字符串，插值就可以用来定义一个值。围绕element属性包装括号并将其绑定到component属性是最常见的属性绑定类型。第三种方法是在element属性之前添加bind。

9. 请使用一个例子解释说明ngif指令。

ngIf是一个内置的模板指令，用于添加或删除DOM的某些部分。 此添加或删除取决于表达式是true还是false。

如果表达式计算为false，则ngIf指令将删除HTML元素。如果表达式被评估为true，则该元素将添加到DOM中。

语法：

*ngIf=”<condition>”

Js

示例：

<ul *ngFor="let person of people"*ngIf="person.age < 30"><li>{{person.name}}</li></ul>

10. 写出在angular中指令和组件之间的区别。

在angular中，元数据注释之间存在区别。 一些区别如下：指令用于向现有元素添加行为。 而组件用于创建具有附加行为的组件。@directive用于创建指令。 而@component用于创建组件。指令用于将不同的行为附加到现有DOM元素。在组件的帮助下，可以将应用程序分解为更小的组件。指令用于创建可重用行为。 然而，组件用于创建可重用组件。指令不需要视图。然而，组件需要通过@view查看

11. 你对隔离单元测试有什么了解？

顾名思义，单元测试就是测试各个代码单元。 为了回答一些问题，隔离被测代码单元非常重要。 当我们使用隔离单元测试时，我们不会被迫创建相关的部分，如DOM元素进行排序。 借助隔离的单元测试，实现一切变得更加容易。 为了模拟请求，还提供了依赖注入。 可以单独测试单个排序功能。 而且不仅是排序功能，任何功能都可以单独测试

12. 在angular中你对服务有什么了解？

angular中的服务用于组织和共享应用程序中的代码。 这些是在依赖注入的帮助下连接在一起的合适对象。 angular服务被懒惰地实例化。 仅当应用程序组件依赖于它时，该服务才由angular实例化。 在angular中，可以制作新服务，甚至可以在其他内置服务中使用。 angular中存在30多种内置服务

13.什么是Angular？

Angular是基于typescript编程语言的，开源的网络应用开发框架。是由谷歌倡导开发和维护的。它使用简单，功能强大，可以快速搭建前端网络应用。它提供了很多非常优秀的功能，比如说声明性的模板，依赖注入，端到端的工具，等等可以为网络应用开发提供便利。

14、解释Angular 2应用程序的生命周期hooks是什么？

Angular 2组件/指令具有生命周期事件，是由@angular/core管理的。@angular/core会创建组件，渲染它，创建并呈现它的后代。当@angular/core的数据绑定属性更改时，处理就会更改，在从DOM中删除其模板之前，就会销毁掉它。Angular提供了一组生命周期hooks（特殊事件），可以被分接到生命周期中，并在需要时执行操作。构造函数会在所有生命周期事件之前执行。每个接口都有一个前缀为ng的hook方法。例如，ngOnint界面的OnInit方法，这个方法必须在组件中实现。

15、事件发射器如何在Angular 2中工作的？

Angular 2不具有双向digest cycle，这是与Angular 1不同的。在Angular2中，组件中发生的任何改变总是从当前组件传播到其所有子组件中。如果一个子组件的更改需要反映到其父组件的层次结构中，我们可以通过使用事件发射器api来发出事件。简而言之，EventEmitter是在@ angular/core模块中定义的类，由组件和指令使用，用来发出自定义事件。

16、如何优化Angular 2应用程序来获得更好的性能？

优化取决于应用程序的类型和大小以及许多其他因素。一般来说，在优化Angular 2应用程序时要考虑以下几点：

1）考虑AOT编译。

2）确保应用程序已经经过了捆绑，uglify和tree shaking。

3）确保应用程序不存在不必要的import语句。

4）确保应用中已经移除了不使用的第三方库。

5）所有dependencies 和dev-dependencies都是明确分离的。

6）如果应用程序较大时，我会考虑延迟加载而不是完全捆绑的应用程序。

17、什么是Shadow DOM？它如何帮助Angular 2更好地执行？

Shadow DOM是HTML规范的一部分，它允许开发人员封装自己的HTML标记，CSS样式和JavaScript。Shadow DOM以及其它一些技术，使开发人员能够像<audio>标签一样构建自己的一级标签，Web组件和API。总的来说，这些新的标签和API被称为Web组件。Shadow DOM通过提供了更好的关注分离，通过其它的HTML DOM元素实现了更少的样式与脚本的冲突。

因为shadow DOM本质上是静态的，同时也是开发人员无法访问的，所以它是一个很好的候选对象。因为它缓存的DOM将在浏览器中呈现得更快，并提供更好的性能。此外，还可以相对很好地管理shadow DOM，同时检测Angular 2应用的改变，并且可以有效地管理视图的重新绘制。

18、service怎么使用？

AngularJS中你可以创建自己的服务，或使用内建服务。

使用Module的provider方法

使用Module的factory方法

使用Module的service方法

三种方法的比较

需要在config中进行全局配置的话，只能选择provider方法，factory和service是使用比较频繁的创建服务的方法。

它们之间的唯一区别是：service方法用于注入的结果通常是new出来的对象，factory方法注入的结果通常是一系列的functions；

provider是创建服务最为复杂的方法，除非你需要创建一个可以复用的代码段并且需要进行全局配置，才需要使用provider创建；

所有具有特定性目的的对象都是通过factory方法去创建。

19.Aangular中组件之间通信的方式

Props 父传子

1.调用子组件,通过自定义属性传值

2.子组件内部通过Input来接收属性的值

子传父

1.在父组件中定义一个有参数的方法

2.调用子组件时,绑定自定义事件和上一步方法

3.子组件内部通过Output和EventEmitter来触发事件并传值.

22.Angualr的八大组成部分并简单描述

答案:model是Angular开发中的基本单位,是一个容器,可以包含组件、指令、管道等

Components是可被反复使用的带有特定功能的视图

Templates  是经过指令和管道、组件等增强过的html

Bindings    结合着事件绑定  属性绑定  双向数据绑定等扩展html的功能

Directives分为结构性和属性型指令还有其他模块中比如路由模块中的指令等,主要是增强html.

Pipes    可以对数据做一个筛选、过滤、格式化从而得到目的数据

Service  将组件、应用中的可共用的部分,比如数据或者方法等  封装成服务以方便服用

DependencyInjection  依赖注入

23.Angular中常见的生命周期的钩子函数?

ngOnChanges:当Angular设置其接收当前和上一个对象值的数据绑定属性时响应。

ngOnInit:在第一个ngOnChange触发器之后,初始化组件/指令。这是最常用的方法,用于从后端服务检索模板的数据。

ngDoCheck：检测并在Angular上下文发生变化时执行。每次更改检测运行时,会被调用。

ngOnDestroy:在Angular销毁指令/组件之前消除。取消订阅可观察的对象并脱离事件处理程序,以避免内存泄漏。

组件特定的hooks:

ngAfterContentInit:组件内容已初始化完成

ngAfterContentChecked:在Angular检查投影到其视图中的绑定的外部内容之后。

ngAfterViewInit:Angular创建组件的视图后。

ngAfterViewChecked：在Angular检查组件视图的绑定之后

24.Angular中路由的工作原理

Angular应用程序具有路由器服务的单个实例,并且每当URL改变时,相应的路由就与路由配置数组进行匹配。在成功匹配时,它会应用重定向,此时路由器会构建ActivatedRoute对象的树,同时包含路由器的当前状态。

在重定向之前,路由器将通过运行保护(CanActivate)来检查是否允许新的状态。Route Guard只是路由器运行来检查路由授权的接口方法。保护运行后,它将解析路由数据并通过将所需的组件实例化到<router-outlet></router-outlet>来激活路由器状态。

25.解释rjx在Angular中的使用场景

Rxjs是在微软所提供的一种的异步处理数据的方式,在Angular中处理网络通信时用到了。

创建一个Observable并subsribe

比如:this.http.get('').subscribe((data)=>{ })