使用 Mean Stack 创建工具栏

在本教程的这一部分中，我们将学习如何使用 MEAN Stack 和 Angular Material 组件在我们的应用程序中创建工具栏。我们应该知道，每个应用程序都有某种标题。

为此，我们将创建一个新组件。我们将在 app 文件夹中创建一个新文件夹，并将其命名为 header。

在这个文件夹中，我们将创建我们的 header.component.ts 和 header.component.html 文件，就像我们创建了 post-create.component.ts 和 post-create.component.html 文件一样。

在 header.component.ts 文件中，我们将创建类 HeaderComponent 并导出类 header 组件。我们还将通过从 @angular/core 导入它来添加 @component 装饰器。我们将添加选择器和 templateUrl，并且我们以以下方式编写这个完整的文件

在 html 文件中，我们将使用来自 angular/material 组件框架的另一个组件。我们将通过导入 MatToolbarModule 并将其添加到 app.module.ts 文件中的导入数组来解锁它。

现在，我们将在我们的应用程序中使用 Material Design 工具栏。因此，我们将在 header.component.ts 文件中添加以下代码行

我们也可以为其设置颜色。我们将颜色设置为 primary，因为灰色的外观看起来不太好。

标题组件尚未被使用。为了使用它，我们需要通过转到 app.module.ts 文件中的声明来解锁它。因此，我们将通过以下方式导入它来将我们的组件添加到声明中

现在，我们可以使用我们的标题组件。我们将通过添加以下代码行将其添加到我们的 app.component.html 文件中

我们将保存所有文件并将它们运行到 ng serve。在将其运行到本地主机之后，我们将在浏览器上看到一个工具栏，如下所示

该卡片直接放置在工具栏的边缘，要更改它，我们用 main 元素包装我们的主要内容，如下所示

现在，我们将通过以以下方式在 app.component.css 文件中编写 CSS 代码来设置该组件的样式

我们将保存它并运行它，并且应用程序将如下所示

在下一节中，我们将了解导航。我们将在其中添加导航并使其成为一个有吸引力的应用程序。