Angular如何在RouterLinkActive上将所有链接设置为不同的颜色答案

【问题标题】：Angular How to set all links to a different color on RouterLinkActiveAngular如何在RouterLinkActive上将所有链接设置为不同的颜色
【发布时间】：2020-05-16 00:12:41
【问题描述】：

我有一个导航栏，当我导航到“关于”页面时，我希望所有链接都是黑色的，但是，我的 SCSS 语句似乎不适用于所有锚标记。

html

 <div class="navbar-nav">
      <a class="nav-item nav-link active" [routerLink] = "['/home']">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" [routerLink] = "['/about']" routerLinkActive = "BlackLinks">About</a>
      <a class="nav-item nav-link" href="#">Gallery</a>
      <a class="nav-item nav-link" href="#">Contact</a>
    </div>

SCSS


.BlackLinks{
  a{
    color: #343434 !important
  }
}

我认为我可以使用 ngClass 实现这一点，但我觉得我需要在服务中创建一个变量并在我更改到新页面时设置它，但我不想这样做。

【问题讨论】：

没找到你吗？您想要当前活动链接的活动颜色吗？
@Jithin B 对不起，我编辑了希望更有意义
好的。当您在关于页面时，您希望链接是黑色的。 nav-link 的默认颜色是什么？
是的，这是正确的，默认颜色是白色

标签： angular typescript sass

【解决方案1】：

当您在 about 页面时，您需要为每个 nav-link 添加一个类。考虑类是黑色的，那么

    <div class="navbar-nav">
      <a class="nav-item nav-link" [ngClass]="{ 'color-black': about.isActive }">Current Page</a>
      <a class="nav-item nav-link" [ngClass]="{ 'color-black': about.isActive }">About</a>
      <a class="nav-item nav-link" [ngClass]="{ 'color-black': about.isActive }">Gallery</a>
      <a class="nav-item nav-link" [ngClass]="{ 'color-black': about.isActive }">Contact</a>
    </div>

CSS

.nav-link {
   color: #ffffff;
}

.nav-link.color-black {
    color: #000000;
 }

我刚刚给出了添加黑色类的逻辑。在 about 页面中，您可以使用自己的方式添加课程。当您在特定页面中时，有不同的方法可以添加类。

【讨论】：

是的，但正如我所说的不想用 NgClass 做这个我想用 routerLinkActive 做这个，但我不知道它是否可能
在 about 页面中是否可以使用您的方法添加 BlackLinks 类？
没有将 scss 添加到我的关于组件页面不会影响我的导航栏组件
我的意思是，你能用这个 routerLinkActive = "BlackLinks" 添加类吗？
是的，它有效，但只影响我所在的路线，例如，如果我在 about 那么只有 about 处于活动状态