如何将 css class 添加到有效的页内-link（标签 link）- Angular

Question

我有一个 Angular，具有下一个布局的单页网站

<body>
  <!-- Header -->
  <div class="header">
    <a [href]="{{ '#' + page1_Id }}">Page1</a>
    <a [href]="{{ '#' + page2_Id }}">Page2</a>
    <a [href]="{{ '#' + page3_Id }}">Page3</a>
  </div>

  <!-- Page1 -->
  <div [id]="page1_Id">
    I'm Page 1
  </div>
  <!-- Page2 -->
  <div [id]="page2_Id">
    I'm Page 2
  </div>
  <!-- Page3 -->
  <div [id]="page3_Id">
    I'm Page 3
  </div> 
</body>

（其中pageN_Id是一个分量变量）

当我单击页眉的 link pageN 时，window 将滚动到 pageN（使用页内导航，<a href="#someId">）

现在我想在单击 link 时向 a-link 元素添加一个 'active' css-class。

我知道指令 routerLink 和 routerLinkActive，但是如何将它们与页内 link 一起使用（而不是简单的页间 link )

Answer 1

您可以使用 bootstrap 使您的编码更容易 here 是您正在寻找的 bootstrap 的功能之一

Answer 2

创建一个变量，在单击时设置为 href link 的页面 ID。

示例：

 <a id="{{page1_Id}}" class="nav-link" [ngClass]="{ 'active': pageid== page1_Id  }" (click)="clicked(page1_Id )"></a>

现在在您的 .ts 组件文件中：

clicked(object) {
    this.pageid= object;
}

如何将 css class 添加到有效的页内-link（标签 link）- Angular

How to add css class to a active in-page-link (hashtag link) - Angular

routerlinkactive

routerlink

angular