在 Mean Stack 中安装 Angular Material

在上一节中，我们学习了如何创建 UI 并从 UI 内容获取用户输入。现在，是时候开始处理我们正在构建的真实应用程序了。我们想要设计一个漂亮的应用程序。我们可以自己编写所有的 CSS 样式并从头开始编写所有内容。但我们正在使用 MEAN stack，我们希望专注于 MEAN stack 组件，而不是样式。

我们将使用 Angular Material，它是由 angular 团队的一部分创建的软件包。 Angular material 为我们提供了一组预构建的 Angular 组件。它不是像 bootstrap 这样的样式包。它附带了一些可以放入我们应用程序中的 angular 组件。

如果我们查看 material.angular.io 上的组件部分，我们将看到一堆预构建的组件，它们应该为我们提供构建一个漂亮的应用程序所需的一切。

现在，我们将通过安装它将其添加到我们的项目中。我们将打开命令提示符并使用以下 npm 命令安装它

这是一种添加它的方法。现在，如果我们使用最新的 CLI 版本，那么我们有不同的命令

此命令不仅安装 material 包，还配置我们的项目以包含它。

现在，我们将回到我们的项目，要使用这样的输入元素，我们需要解锁它，因为默认情况下，我们应用程序中没有任何单个 material 提供的组件可用。这样做是为了节省空间，我们不需要导入我们不使用的东西。所以，我们将从 angular material 中导入 MatInputModule 到我们的 app.module.ts 文件中，我们还将它添加到 import 数组中。它将解锁所有与输入相关的组件。

注意：如果我们使用 angular material 包版本 8，则这种添加 angular material 组件的方式是正确的。如果我们使用 angular material 的版本 9 或更高版本，那么有以下方法可以导入 material 组件模块

现在，我们将回到我们的 post-create.component.html 文件。在文本区域中，我们将简单地将 matInput 添加到文本区域，如下所示

这一行不会对文本区域产生任何影响，因为这些输入组件只能与其他组件一起使用。我们必须将此行包装到 <mat-form-field></mat-form-field> 中，如下所示

如果我们运行它，它看起来像这样

它还不是很漂亮，但我们会把它变成一个更漂亮的组件。因此，我们将使用 angular material 框架中的另一个组件，即 MatCardModule。

之后，我们将使用 <mat-card></mat-card> 包装我们的 <mat-form-field></mat-form-field>，如下所示

现在，我们运行它，它看起来像这样

现在，我们将通过向其中添加一些自定义样式来限制宽度。我们将创建一个新文件 post-create.component.css 并通过 typescript 文件导入它。

现在，我们将以以下方式在那里编写我们自己的 CSS 代码

现在，我们将保存它并运行它。运行后，我们的浏览器屏幕将如下所示

现在，我们可以看到这里的卡片，并且稍微好一点。我们对文本区域也不是很满意。因此，我们还将以以下方式为此编写一个样式表代码

现在，我们将以与文本区域相同的方式来设置按钮的样式。我们还将使用 angular material 提供的按钮。通过从 angular material 导入 MatButtonModule，我们将它添加到 app.module.ts 文件中存在的“imports”数组中。

现在，我们将通过添加以下代码行在我们的 post-create.component.html 文件中使用它

我们使用了 mat-raised-button，但您可以使用 angular material 中提供的任何类型的按钮。我们也可以向其中添加颜色属性。我们以以下方式将其设置为主色

现在，我们将保存它并在浏览器上运行它，并查看我们的应用程序以及带有样式按钮，如下所示

在下一节中，我们将学习如何使用 angular 创建工具栏。