如何在使用頁面錨定導航時將「激活」類設置爲在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