Angular 2是一个功能强大且功能完善的框架，可用于构建最佳的Web应用程序。 考虑到TypeScript的构建，Angular 2充分利用了诸如装饰器和接口之类的未来语言功能，从而使编码更快，更轻松。

在我的课程“ 带有Angular 2的Modern Web Apps”中的这段视频中，我将向您展示如何使用Angular 2来构建与服务器交互的服务。 请注意，在此视频中，我们基于本课程前面的代码，您可以在GitHub上找到该课程的完整源代码。

如何构建Angular 2服务

如何创建项目服务

到目前为止，我们一直在构建项目管理应用程序。 现在，我们向用户显示的项目只是硬编码到我们的项目组件中。 但是，这不是一个长期的解决方案。 我们想要某种方式来从服务器中获取项目列表。 因此，在此视频中，我们将创建一个项目服务。

在Angular中，服务基本上是我们希望可用于多个组件的任何功能集。 这只是包装某些功能的一种简便方法。 因此，在我们的应用程序目录中，让我们创建一个项目服务。 我们将其称为projects.service.ts 。

现在，当然服务不是组件，因此无需导入组件装饰器。 但是，我们需要另一个装饰器，它是Injectable 。 因此，让我们从angular/core导入Injectable 。 现在，正如我所说， Injectable是一个装饰器，它没有任何属性。 因此，我们只调用Injectable ，然后导出我们的类。 我们将类称为ProjectsService 。

Injectable使此类成为Angular可以用作依赖项注入的类。 稍后我们将看到，我们使用依赖项注入在使用项目服务的组件中获取该项目服务的实例。 Angular队列以这种方式使用依赖项注入，以便在您要测试组件时可以轻松注入模拟服务和类似的东西。

将方法添加到服务

因此，让我们继续在此处向我们的ProjectsService添加一些方法。 首先，我们需要Angular拥有的Http模块。 这将使我们可以直接向服务器发出请求。 因此，让我们导入Http ，我们还将导入一些类型检查所需的响应类。 这两个都来自@angular/http 。

现在，我们还应该将Http模块导入到我们的应用程序模块文件中。 因此，让我们继续进行，然后再忘记。 在我们上方的本机模块，我将导入HttpModule ，然后在我们的进口下降，让包括HttpModule 。

现在，我们已经在两个必要的地方都导入了它，我们可以使用依赖注入将这个Http类注入到我们的ProjectsService 。 因此，我们要做的是创建一个构造函数，而不是在这里做类似new Http()事情。 并且此构造函数将采用Http类型的属性。

Angular在创建我们的ProjectsService实例时会看到此参数，并将此Http类与我们导入到我们的应用模块中的HttpModule匹配，并将其实例注入构造函数中。

现在，我们可以写this.http = http; 将此参数分配给我们类的属性。 但是TypeScript实际上为此具有一些快捷方式语法，因此我们可以直接在构造函数内部应用关键字private ，并且TypeScript会自动使其成为类属性。 现在，从类的其他方法中，我们可以使用this.http 。

因此，让我们创建一个名为getProjects()的函数。 这将是我们用来获取项目列表的方法。

现在有了TypeScript中的函数，我们仍然可以使用: Type语法来指定函数返回值的类型。 对于getProjects()我们将返回包装了Project的Observable 。

因此，在讨论这是什么之前，让我们导入这两个类。 因此，我将从rxjs导入Observable ，并让我们也导入我们的Project模型。

使用可观察物

那么什么是可观察的呢？ 不幸的是，在这里我无法为您提供有关可观察物的完整介绍，但是Angular 2确实在很大程度上依赖于可观察物，我将尽力使它们尽可能简单。

基本上，可观察对象是类似于promise或数组的包装器。 许诺，数组和可观察对象中都包含其他项。 对于数组，我们有多个项目。 在承诺的情况下，我们基本上具有一些将来会在某个时候获得的单一价值。

对于可观察变量，它可以是一个值，也可以是多个值。 有时使用的一个定义是异步数组。 基本上，可观察的是我们可能随时获取的更多数据流。 我想您会在这里的一些课程中看到如何使用可观察对象使获取和设置某些数据变得更加容易。 现在，如果您以前从未看过可观察物，则可以将它们视为一种承诺。

那么我们将从这个函数返回什么呢？ 好了，我们可以做到这一点this.http.get() ，所以让我们获取/api/projects ，它将返回我们的项目列表。 然后，我们可以做的是将响应映射到我们要编写的名为this.extractData 。

您可以在此处将map()函数视为promise上的then()方法。 就像在数组上工作一样，其中map()将对该数组内的每个值执行一些操作，然后返回具有这些新值的新数组。

因此，基本上， map()允许您对容器内的值执行某种操作。 对promise中的then()方法也是如此。 您可以对promise调用then() ，以对promise中的值调用某些函数。 然后，无论您创建了什么新值，它都会返回一个新的承诺。

这与map()相同。 我们将在此可观察对象内部的响应上调用extractData() ，从中返回的结果是一个包装项目的可观察对象。

因此，让我们创建一个extractData()函数，这将采用Angular HTTP库Response类。

因此，我们将返回res.json() ，这会将HTTP响应转换为实际的JSON主体。 现在， extractData()的值将在我们的getProjects()调用中返回，并且Angular将在此处看到它与我们的返回类型匹配，因为它将是一个可观察的项目数组。

在项目组件中导入功能

现在我们有了这个getProjects()函数，让我们转到我们的项目组件并导入它。 首先，让我们导入ProjectsService 。

现在，因为我们要将ProjectsService实例注入该组件，我们需要告诉Angular它应该为此组件提供一个实例。 因此，让我们在组件装饰器中添加一个providers属性，然后告诉我们它将在该组件内部需要ProjectsService 。 因此，我们添加一个构造函数，我们可以像在服务中一样使用依赖注入。

我们将创建一个名为service的参数，这将是一个ProjectsService对象，因此Angular将知道将我们的ProjectsService实例之一注入此类。 我们将在此处为该参数指定private关键字，以便立即将其设置为属性。

有了这个，我们可以继续在ngOnInit使用它。 因此，在这里我们可以调用this.service.getProjects()记住这将返回一个可观察的结果）以及我们要在此处调用的方法subscription subscribe() 。

您可以认为subscribe()方法就像我们在返回的promise上调用then() ，或者如果您将此视为数组，则subscribe()就像数组上的forEach()方法一样。 有点像map() ，它接收数组内部的任何内容，在这种情况下，它是可观察的。

但是， forEach()不返回新数组， subscribe()不返回新的可观察对象。 所以这有点像行尾。 因此， subscribe()将获取我们的项目列表作为其参数，我们可以说this.projects指的是我们的项目数组，将等于projects 。 这样，我们就可以从可观察值中解开它的值，并且该值现在可以在该类中使用。

如果返回浏览器查看项目列表，我们将看到我放入服务器中的三个项目。

观看完整课程

您可以跟着我一起构建功能齐全的项目管理应用程序，并进行用户登录和验证以及实时聊天。 您将获得有关Angular 2模板语言的课程，结构化应用程序，路由，表单验证，服务，可观察对象等。

如果您从未使用过Angular 2，请在我们的Angular 2入门课程中学习所有需要了解的知识。 如果您想以Angular 2的体验为基础，为什么不来看看：

• 使用Angular 2创建投资组合网站
• Angular 2路由
• NativeScript和Mobile Angular 2入门

翻译自: https://code.tutsplus.com/tutorials/how-to-build-an-angular-2-service--cms-27943