更改角度4中所选链接的颜色[重复]答案

【问题标题】：Change color of selected link in angular 4 [duplicate]更改角度4中所选链接的颜色[重复]
【发布时间】：2019-01-25 21:24:26
【问题描述】：

我使用 bootstrap 4 创建了一个标题，但我希望当我单击任何链接时，链接会更改其颜色并保持选中状态。

<nav>
    <div class="collapse navbar-collapse justify-content-end" id="nav-content">
        <ul class="navbar-nav" id="nav">
          <li class="nav-item">
            <a class="nav-link" routerLink="">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/experience">Experience</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/skills">Skills</a>
          </li>
        <ul>
     <div>
<nav>

我不知道接下来要做什么，我不想使用jquery。

请帮帮我。

【问题讨论】：

看看RouterLinkActive directive，应该可以满足你的需求

标签： angular html css

【解决方案1】：

您可以使用routerLinkActive

.html file

<nav>
    <div class="collapse navbar-collapse justify-content-end" id="nav-content">
        <ul class="navbar-nav" id="nav">
          <li class="nav-item">
            <a class="nav-link" routerLink="" routerLinkActive="class-name" routerLinkActiveOptions="{exact:true}">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/experience" routerLinkActive="class-name" routerLinkActiveOptions="{exact:true}">Experience</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/skills" routerLinkActive="class-name" routerLinkActiveOptions="{exact:true}">Skills</a>
          </li>
        <ul>
     <div>
<nav>

.css/.scss 文件

.class-name{
    color:red;
    ...
}

【讨论】：

【解决方案2】：

您应该使用 RouterLinkActive

<a class="nav-link" routerLink="/experience" 
   routerLinkActive="YourClass" routerLinkActiveOptions="{exact:true}">
    Experience
</a>

routerLinkActive - 分配你的班级。
routerLinkActiveOptions="{exact:true}" - 匹配确切链接时添加班级

【讨论】：