在MEAN堆栈中设置链接样式

在之前的章节中，我们学习了如何添加路由。我们学习了很多关于路由的知识。在本节中，我们将通过使链接具有样式来改善视觉效果。我们将使用以下步骤来改进视觉效果

1) 在我们的header组件中，我们将创建一个新文件，即 **component.css** 文件。我们将转到我们的 **header.component.ts** 文件，并以下列方式将其连接到该 CSS 文件

2) 在此文件中，我们可以为该组件设置锚标记的样式。我们将通过使用文本装饰和颜色属性来设置锚标记的样式，如下所示

现在，如果我们保存它并返回到localhost:4200，我们将看到更好的链接视觉效果，就像

3) 它看起来不错，但是项目符号显示在 **New Post** 前面。应该从这里删除它，我们将使用以下方式使用CSS代码为我们的无序列表执行此操作

现在，我们回到该应用，我们的angular应用看起来像

4) 项目符号已删除，但是现在 **My First App** 和 **New Post** 直接相邻。首先，我们将返回到 **component.html** 文件，并将此 **My First App** 更改为Message，如下所示

现在，为了在 **Message** 和 **New Post** 之间留出一些空间，我们将返回到header组件的 **html** 文件，并使用class创建另一个元素。您可以为此类提供任何名称，但在我们的示例中，其名称将为 **“spacer”** 。将以下列方式添加此元素

5) 现在，我们将返回到此组件的 **CSS** 文件，并设置spacer类的样式。我们将以下列方式使用 **flex** 样式

现在，我们回到该应用，我们的angular应用看起来像

6) 在最后一个按钮上设置一些样式会很好。我们将不仅使用正常的锚标记，而且以下列方式将mat按钮指令添加到此

我们开箱即用地获得了不错的悬停效果。

7) 这种悬停效果非常棒。我们将在此锚标记中使用routerLinkActive指令。每当此指令检测到此链接指向的路由是当前活动路由时，此指令都会为该链接分配一个新的CSS类。angular材料具有一些辅助CSS类，我们可以像mat-accent一样使用它们。mat-accent会将强调色应用于底层元素。我们将以下列方式使用它

如果我们在页面上，它将被突出显示，但是如果不是，则不会像这样突出显示

现在，它运行良好。在下一节中，我们将学习客户端v/s服务器端路由，并学习如何编辑我们的帖子。

下载完整项目（Styling Link.zip）