如何在使用页面锚定导航时将“激活”类设置为在Angular 2中引导导航栏？

Question

我正在创建一个使用Angular 2和Bootstrap 4的单页网站。

我创建了一个始终在页面顶部的导航栏组件，并且我使用了页面锚定导航（#id）。请注意，我还没有创建路由模块（到目前为止，没有必要这样做）。

导航栏代码如下：

<nav class="navbar navbar-default fixed-top navbar-inverse navbar-toggleable-md"> 
    <div class="container"> 

    <div class="navbar-header"> 
     <button class="navbar-toggler navbar-toggler-right btn btn-outline-secondary" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample"> 
     <i class="fa fa-bars" aria-hidden="true"></i> 
     </button> 
     <a class="navbar-brand" href="index.html">Garatéa</a> 
    </div> 

    <div id="collapseExample" class="navbar-collapse collapse" [ngbCollapse]="isCollapsed"> 
     <ul class="nav navbar-nav ml-auto"> 
     <li class="nav-item"><a class="nav-link" href="#home">Início</a></li> 
     <li class="nav-item"><a class="nav-link" href="#about">Sobre</a></li> 
     <li class="nav-item"><a class="nav-link" href="#team">Quem Somos</a></li> 
     <li class="nav-item"><a class="nav-link" href="#contact">Contato</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

每个链接对应的单页的网站的一部分，例如，家里组件模板是：

<div id="home" class="text-center home-background"> 
    <div class="overlay"> 
    <div class="content"> 
     <h1>Bem vindo à <strong><span class="title-text">Garatéa</span></strong></h1> 
     <p class="lead">Somos uma inciativa que <strong>aumenta a taxa de sobrevivência</strong> em emergências médicas.</p> 
    </div> 
    </div> 
</div> 

我的问题是：如何我可以突出显示导航栏中与我目前浏览的网站部分相对应的链接吗？例如，如果我正在查看关于该部分的团队，我希望导航栏上有一个active CSS类：<li class="nav-item active"><a class="nav-link" href="#about">Sobre</a></li>。

Answer 1

您可以使用srcElement上<a>标签点击如下

<a class="nav-link" (click)="clickedLink($event)">Início</a> 
<a class="nav-link" (click)="clickedLink($event)">Início</a> 
<a class="nav-link" (click)="clickedLink($event)">Início</a> 

方法将被作为

clickedLink(e){ 
let element = e.srcElement; 

console.log(e) 
for(let i =0; i <element.parentElement.children.length ; i++){ 
    if(element.parentElement.children[i].classList.contains('active')){ 
    element.parentElement.children[i].classList.remove('active') 
    } 
} 
element.classList.add('active'); 

}

LIVE DEMO