在 MEAN Stack 中添加错误对话框

在我们之前的章节中，我们成功创建了 错误拦截器。在本节中，我们将使用它并显示基本的错误对话框。接下来，我们将在我们的应用程序中添加错误对话框。

现在，我们将使用 Angular Material 对话框。要使用它，我们将使用以下步骤

1) 为了使用 Angular Material 对话框，我们必须解锁它。因此，我们将返回到我们的 app.module.ts 文件并从 @angular/material 导入 MatDialogModule。导入后，我们还必须将其添加到 imports 数组中。

2) 我们可以通过将对话框服务注入到我们应用程序中任何想要使用它的地方来打开一个对话框。之后，我们将在注入的对象上调用 open，并在那里传递对我们想要用作对话框内容的组件的引用。我们还可以传递一些额外的配置，例如宽度。

我们将在错误拦截器中使用对话框，为此，我们必须添加 @Injectable，因为我们想要将服务注入到对话框服务中。

为了注入对话框服务，我们创建了一个构造函数并在那里使用了 MatDialog。

3) 现在，我们可以使用对话框了，我们可以用它显示一些东西，但是我们需要添加一个我们想要用作内容的组件。因此，我们将创建一个新文件夹，即 error，在这个文件夹中，我们将创建一个新的 typescript 文件，我们将把它命名为 component.ts 文件。

4) 我们将在这个文件中使用 export 关键字创建一个新类，并使用 @Component 将其设为一个组件。我们不需要添加一个选择器，因为我们不会通过它的选择器来使用这个组件，但是我们需要一个模板。因此，我们将创建 HTML 文件并将其指向装饰器。

5) 我们现在将定义我们想要在我们要打开的错误对话框中看到的内容。在 html 文件中，我们将有一个 h1 标签，它显示 发生了错误！，在它下面，我们将有一个带有消息的段落。我们将使用字符串插值输出一个 message 属性，我们将把它添加到我们的 Error.component.ts 文件中。

6) 现在，我们必须注册这个组件，你很清楚如何注册一个组件。

7) 现在，我们需要做一些不同的或特别的事情。我们将加载该组件，既不通过选择器，也不通过路由。我们必须告诉 angular 它需要准备好最终创建这个组件。它通常需要通过我们在某处使用选择器或将其用作路由器中的组件的事实来准备。但是由于我们将动态创建该组件，我们需要告诉 angular 将要发生这种情况；否则，我们会遇到错误。为此，我们在 ngModule 配置 中添加第五个项目。我们将添加 entryComponents 数组。我们很少使用它，但在这里我们这样做。在这个数组中，我们只需添加 ErrorComponent。这将简单地通知 angular 将要使用此组件，即使 angular 无法看到它。

8) 现在，我们将转到我们的错误拦截器并使用该对话框服务打开一个带有此错误组件的对话框。我们将访问我们的对话框服务，调用 open 方法并将我们的 ErrorComponent 传递给该方法。

一切看起来都很好。我们将保存所有文件并返回到我们的 angular 应用程序。现在，如果我们尝试使用已注册的电子邮件进行注册，我们应该看到对话框。

现在，我们将添加此对话框，为此，我们有一些问题，即样式，并且我们没有看到消息。由于我们创建 Error 组件的方式，无法看到消息。我们无法像之前那样设置属性。

9) 我们想要显示一条消息，但我们可以用不同的方式传入数据。在打开对话框的错误拦截器中，我们可以通过向 open 方法添加第二个参数来传递数据。我们可以设置一个 data 属性，该属性允许我们传入一个对象，该对象表示我们想要在此错误组件中工作的数据。

消息是我们需要在该拦截器中派生出来的。我们将在错误的 error 对象中检查消息。如果存在，那么我们将使用它。否则，我们将使用默认消息。

10) 现在，要检索该数据，我们必须转到错误组件并将某些内容注入其中。我们将创建一个构造函数，而我们也将由 @angular/material 提供。我们通过使用一个特殊的装饰器，即 @Inject 装饰器来传递数据，该装饰器允许我们指定一个特殊的令牌。需要指定令牌，因为对于依赖注入系统，angular 用于识别我们正在传递的数据。这种特殊的注入方式是由于此错误组件的特殊方式而需要的。

我们要使用的令牌是 MAT_DIALOG_DATA 令牌。它是内部使用的标识符。这将以以下方式保存数据

11) 现在，数据字段在错误组件中可用，我们将在 component.html 文件中输出它。

12) 它运行良好，但外观非常糟糕。我们的 angular material 对话框为我们提供了一些类，这些类可以帮助我们改善对话框的外观。我们将添加 mat-dialog-title 指令到 h1 标签，并向段落添加 mat-dialog-content。

这些指令将使我们的对话框看起来更好。

13) 段落看起来仍然不对，因为我们不能将 mat-dialog-content 指令添加到段落中。我们将使用 div 标签，在那里我们将添加此指令并将 mat-body-1 类添加到段落标签中以更改字体样式。之后，我们将在 <div></div> 之间添加我们的 段落标签

14) 现在，如果对话框有一些按钮可能会很好。我们将简单地添加一个按钮，方法是添加另一个 div，它将具有 mat-dialog-action 指令或选择器以正确地定位它们，就像内容与此正确地定位一样。在 dive 标签之间，我们将添加一个带有 mat-button 选择器的普通按钮，并且作为文本，我们将使用 Ok 我们还将向该按钮添加另一个指令，即 mat-dialog-close。此指令将确保如果单击它，此按钮会自动关闭对话框。

现在，如果我们返回到我们的 angular 应用程序并尝试使用已注册的电子邮件进行注册，我们将看到一个带有按钮的对话框，如下所示

现在，将此错误处理程序应用于具有更好消息的其他错误会很好，我们将在下一节中这样做。