更改角度4中选定链接的颜色 [英] Change color of selected link in angular 4

问题描述

我使用引导程序4创建了标题，但我希望当我单击任何链接时，链接会更改其颜色并保持选中状态.

I made a header using bootstrap 4 but I want that when I click on any link, link change its color and remains selected.

<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.

I don't know what to do next, I don't want to use jquery.

请帮助我.

推荐答案

您可以使用 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文件

.css/.scss file

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

这篇关于更改角度4中选定链接的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！