在 MEAN Stack 中添加加载动画

在前一节中，我们学习了如何在单独的文件中对后端路由进行分组并将其连接到后端。 之前一切都运行良好。 本节将让我们学习加载动画以及如何将其添加到我们的 Angular 应用程序中。 我们将在这里添加两件事，即导航用户并显示加载动画。 我们将使用以下步骤来添加它们

导航用户非常简单。 我们将返回到 post-create 组件文件并找到 onAddPost() 方法。 我们希望在添加或更新帖子完成后导航用户。 为此，我们对 post.service.ts 文件进行一些更改，我们在其中获得成功的响应。

1) 我们将在 post-service 中注入一些有助于导航的东西，那就是 Angular 路由器，因为我们不能像添加新帖子那样通过添加链接来更改页面。 我们将以编程方式执行此操作，为此，我们将路由器注入构造函数中，如下所示

2) 现在，我们将返回到 addPost() 方法，并在该方法的订阅中，我们将访问我们的路由器并按以下方式调用 navigate 方法

在此 navigate method() 中，我们需要传递一个段数组，就像我们想要传递多个普通字符串时对路由器链接所做的那样。 因此，第一个段将是斜杠。 此斜杠将始终将我们导航到根路由。

3) 我们将以类似的方式在 updatePost() 方法中执行相同的操作，如下所示

现在，添加或更新帖子后，我们将导航到路由页面，例如

4) 现在，要使用加载动画，Angular 为我们提供了进度动画。 因此，要使用它，我们需要解锁它。 我们将返回到我们的 module.ts 文件，并在这里添加一个新模块，即 MatProgressSpinnerModule，如下所示

5) 现在，当加载帖子时，我们将在我们的 post-create.component.ts 文件中使用它。 在 ngOnInit() 方法中，当我们获取帖子时，我们将显示它。 因此，我们将创建一个新属性，即 loading，并且我们最初将其设置为 false，其中在 ngOnInit() 方法中帖子获取开始。 我们会将此属性设置为 true，并且在帖子获取完成后，我们将再次将此属性设置为 false，如下所示

6) 现在，我们使用“Loading”属性来隐藏 post-create 组件的整个表单，并在加载时显示加载动画。 为此，我们将使用带有 *ngIf = "Loading" 的 <mat-spinner></mat-spinner>，并在我们的 <form></form> 中使用 *ngIf = "!Loading"，如下所示

现在，如果我们保存它并尝试编辑帖子，我们将会在屏幕的左侧看到一段时间的加载动画。

7) 我们将添加样式以使此加载动画居中。 我们将返回到我们的 post-create 组件的 CSS 文件，并按以下方式编写样式规则

这将使加载动画居中，如下所示

8) 现在，我们还将在保存帖子时添加一个加载动画。 因此，我们将返回到我们的 post-create.component.ts 文件并找到 onAddPost() 方法。 在此方法中，我们将 Loading 属性设置为 true，即在我们开始创建帖子的地方。 我们不需要将其重置为 false，因为保存帖子后我们将离开此页面。

现在，如果我们保存帖子，我们也会看到一个加载动画，如下所示

9) 我们还将在消息列表页面中添加一个加载动画。 我们将以与在 post-create 组件中所做的相同方式进行操作，即添加 <mat-spinner></mat-spinner>。 我们将按以下方式添加 <mat-spinner>

10) 现在，我们需要在 post-list.component.ts 文件中定义 Loading 属性，最初，我们将此属性设置为 false。 在 ngOnInit() 方法中，我们将在调用 getPosts() 方法之前将 "Loading" 属性设置为 true，之后，一旦我们得到更新的帖子，我们将此属性设置为 false，如下所示

11) 现在，我们将编写 CSS 代码来设置加载动画的样式，就像我们在 post create 组件中所做的那样

现在，如果我们返回到我们的 Angular 应用程序，我们将看到一个加载动画，如下所示

一切正常，从下一节开始，我们将开始MEAN Stack 教程的新模块。 在该模块中，我们将学习图像，用于图像上传的 Angular Material 以及有关图像上传的更多概念。

下载完整项目(Loading spinner.zip)