MEAN Stack 中的服务

在前一节中，我们学习了表单以及如何在我们的应用程序中使用它们。在本节中，我们将学习如何从 post-create 组件获取新的 post 到 post-list 组件。

之前，

1. 我们得到了属性和事件绑定的链。
2. 我们在 post-create 组件中发出了我们的 post。
3. 我们将此 post 传递给其父组件。
4. 从父组件，我们将其传递给 post-list 组件。

这很好用。 但是在更大的应用程序中，它变得越来越典型。 原因是我们需要更长的属性和事件绑定链才能将元素从组件 X 传递到 Y，Y 传递到 Z，等等。

这不是我们想要构建的。 因此，我们将使用另一种在组件之间传递数据的方式，即服务。 服务是由 angular 注入到组件中的类。 服务能够集中一些任务，并可以轻松地从不同的组件中访问数据，而无需属性和事件绑定。 我们将使用以下步骤将服务添加到我们的应用程序中

1）我们将在 posts 文件夹中创建一个新文件，并将其命名为 service.ts。 我们将以与创建 post.model.ts 文件相同的方式创建此文件。

2）在此文件中，我们将创建一个服务类，该类是一个 typescript 类。 我们使用 export 关键字创建此类，因为我们在不同的组件中使用此类。 在此类中，我们必须添加一个帖子列表，因此我们将以以下方式创建一个类型为 Post 的 posts 数组

posts 属性是私有的，因为我们不希望有人从外部更改它。

3）现在，我们将创建一个名为 getPosts 的新方法。 此方法将帮助我们检索帖子。 在此方法中，我们将返回如下的帖子

4）我们不想返回原始数组，因为数组和对象是 JavaScript 和 typescript 中的引用类型。 引用类型是一种类型，如果我们尝试这样做，它将不会被复制。 内存中的对象将保持不变。 我们只是复制了地址，因此指针指向该对象，而不是值。 因此，为了真正复制它，我们将以以下方式使用扩展运算符，这是一个下一代 JavaScript 功能

在上面的代码中，我们添加了方括号以创建一个新数组，并且使用三个点来获取 posts 数组的所有元素并将其添加到此新数组中。

5）我们还创建了 addPost() 方法，此方法将帮助我们在数组中添加帖子。 在此方法中，我们可以传递帖子，或者简单地传递标题和内容。 之后，我们将创建一个类型为 Post 的新帖子。 这是一个 JavaScript 对象，具有标题和内容属性。 我们定义了两个属性，并将这个新创建的 post 推送到 posts 数组中，如下所示

我们将在 post-list 组件 和 post-create 组件 中使用它们。 通过使用此方法，我们可以获取和添加帖子，而无需通过属性和事件绑定传递数据。 我们可以通过在 post-create 和 post-list 组件中使用此服务来实现。 我们将使用称为依赖注入的功能使用 Service。

6）因此，我们将转到我们的 post list 组件并创建一个构造函数。 每当 angular 创建此组件的实例时，都会调用此构造函数。 Angular 有一个复杂的依赖注入系统，能够找出我们想要什么并确实给我们。 因此，我们必须以以下方式在构造函数中将 Service 定义为参数

在上面的代码中，postService 是一个参数，PostService 是参数的类型，用于提示它实际上应该给我们什么。

7）现在，我们需要一个属性来存储 Service 的实例。 我们可以创建一个新属性来存储 Service 的实例，或者我们可以将构造函数的 postService 参数设为公共。

通过创建一个新属性

通过将 postsService 变量设置为 public

8）Angular 现在无法满足此要求，因为它不知道 postService。 这背后的原因是它没有扫描我们所有的文件。 因此，为了让 angular 知道，我们有两种方法

1. 转到 app.module.ts 文件，并在其中添加 postService。 我们将在 providers 数组中添加 PostService，如下所示

2. 我们将转到 postService 并向其添加 @injectable 参数。 此 injectable 也从 @angular/core 导入。 在括号之间，我们传递一个 JavaScript 对象来配置它，如下所示

在下一节中，我们将学习如何调用 getPosts 和 addPost 函数，并快速浏览一下接口。