在 MEAN Stack 中将 Angular 连接到 API 端点

在之前的章节中，我们借助 app.post() 方法设置了 post 后端点，但我们没有将 Angular 连接到它。因此，在本节中，我们将 Angular 连接到 API 端点。我们将添加一些代码，并且还需要替换一些代码，如下所示

1) 在我们的 post 中间件中，我们没有使用 next() 函数。 因此，post 请求将无法到达最后一个中间件。 为此，我们将在最后一个中间件中调用 get 方法，而不是 use()。

2) 我们将返回到 post-create.component.ts 文件。 在此文件中，我们触发了 addPost() 方法，因此我们需要在此方法中发送我们的请求。

我们将返回到 posts.service.ts 文件中的此方法。 我们将在推送 post 之前发送我们的请求。 我们将在此处使用 http.post() 方法并传递 url，该 url 将与 get 请求的 url 相同，但具有不同的 http 谓词，例如

post 请求也会返回一些数据，因此我们需要使用泛型类型来定义它。 我们知道我们将只收到一条消息，该消息的类型为字符串。

我们还需要在此处传递第二个参数，即我们要发布的数据，如下所示

3) 和以前一样，如果我们不订阅，什么都不会发生。 因此，我们将调用 subscribe 方法，如下所示

subscribe 方法也有典型的处理程序。我们将处理成功案例，并以下列方式返回我的响应数据

4) 我们通过在末尾添加以下代码行来使用乐观更新

但是，我们需要从乐观更新切换到仅更新。 我们将通过在 subscribe 方法中添加这两个调用来完成此操作，因为这将仅在获得成功响应后异步执行。

5) 现在，我们将再次重新启动 ng 服务器和节点服务器。当我们在我们的 angular 应用程序中添加新的帖子时，我们将在我们的服务器端日志中获得一条成功消息和一个帖子对象，如下所示

下载完整项目（将 angular 连接到 API endpoint.zip）