MEAN 堆栈中的生命周期钩子

在上一节中，我们学习了服务以及如何使 Angular 知道服务。我们在 postService 类中创建了 getPosts 和 addPost 函数。现在，在本节中，我们将学习如何调用 getPosts 和 addPost 函数。我们还将了解接口。

Angular 提供了生命周期钩子，当 Angular 创建组件时，它会自动执行。 onInit 是我们在应用程序中使用的生命周期钩子之一。

1) onInit 是一个接口类。因此，我们将实现它，并且还将覆盖它的抽象方法，即 ngOnInit() 方法。当 Angular 创建此组件时，Angular 会自动为我们执行此方法。我们将按以下方式实现它

2) 现在，我们将在 ngOnInit() 中调用 getPosts 函数。我们将使用 postsService 属性调用 getPosts() 函数，如下所示

3) 现在，我们将调用 addPost() 函数或方法。我们将回到 post-create.component.ts 文件。我们将使用构造函数将此文件与我们的服务连接起来，就像我们在 post-list.component.ts 文件中所做的那样。现在，我们不使用发射器和输出。我们将从代码中删除这两个，并按以下方式调用 addPost(0 函数

4) 现在，我们需要从文件中删除一些代码，因为我们现在正在使用服务，而不是事件绑定。我们从 post-list.component.ts 中删除 @Input()。我们将回到我们的 posts.service.ts 文件，在此文件中，我们无法获取帖子的副本，因此我们需要将 getPosts 返回语句替换为以下返回语句

我们还从 app.component.html 文件中删除了绑定。我们也从 app.component.ts 文件中删除它。

我们保存所有更改并在 ngServe 上运行我们的应用程序。它的工作方式与属性和事件绑定相同。

还有另一种复制帖子的方法，可以避免在任何组件获取我们的帖子时对帖子进行不必要的操作。我们将使用事件驱动的方法，我们积极地将有关新帖子可用的信息推送给组件。为此，我们可以使用事件发射器，但它旨在与 @output 装饰器结合使用。相反，我们将使用 Rxjs 包提供的另一个功能，即 Subject。

Rxjs 全部与可观察对象有关，并且是一个可能更难以掌握的概念。此包与对象有关，并帮助我们在组件之间传递数据。此功能不是 Angular 的一部分，而是核心依赖项。我们将使用以下步骤在我们的应用程序中使用此功能

1) 我们需要从 rxjs 导入 Subject。我们可以说 Subject 是一个事件发射器，但它有所不同，因为它用于更广泛的用途。

2) 我们将把这个 Subject 创建为私有属性。我们将使用与发射器相同的语法。我们将创建 Subject 的一个实例，并将其传递给该属性。我们还将以有效负载的形式传递帖子列表，如下所示

3) 我们不只是想更新我们的帖子；我们还想发出新值。我们将使用 next 而不是 emit，并传递我们想要发出的新值，如下所示

[…this.post]，创建一个新的数组，其中包含帖子的复制元素。

4) 现在，我们想监听 Subject，因为它会在我们添加帖子时发出。我们将我们的 postUpdated 属性创建为私有，因此我们无法直接访问它以防止其他组件使用它发出数据。因此，我们将添加一个新方法 getPostUpdateListener()，并且在此函数中，我们将添加以下代码行

此返回语句用于返回我们可以监听的对象。

5) 现在，我们将回到我们的 post-list.component.ts。即使保证它现在是空的，我们仍然会在一开始就获取帖子列表。但是在这里，我们还将设置一个监听器到该 Subject，如下所示

subscribe() 函数用于此处进行订阅。 subscribe 函数接受三个参数，即，第一个参数是一个函数，每当发出新数据时都会执行该函数，the 第二个参数将在发出错误时调用，第三个参数是每当可观察对象完成时或没有更多值可以期望时调用的函数。因此，我们将只传递第一个参数，因为两者都不是必需的。

6) 现在，我们将把订阅存储在一个新的属性中，该属性将是订阅类型。我们将从 rxjs 导入订阅，创建属性并将其存储在其中，如下所示

7) 现在，我们需要在此组件被销毁时取消订阅。还有另一个生命周期钩子，即 OnDestroy。我们将实现这一点，这将迫使我们添加另一个方法，即 ngOnDestroy。每当此组件即将被删除时，都会调用此方法。我们将按以下方式添加此钩子和方法

这将删除订阅并防止内存泄漏。

当我们保存并在 ngServe 上运行时，它会正常工作。