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是组件变量）

当我点击标题的链接页面N时，窗口将滚动到pageN（使用页内导航，<a href="#someId">）

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

我知道指令routerLink和routerLinkActive，但是如何将它们与页内链接一起使用（而不是作为页面之间的简单链接）

Answer 1

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

示例：

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

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

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

Answer 2

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

如何将css类添加到活动的页内链接（＃标签链接） - Angular

2 个答案: