0

我有一个带有下一个布局的 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 是组件变量）

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

现在我想在单击链接时向 a-link 元素添加一个“活动”css-class。

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

4

2 回答 2

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;
}
于 2018-01-20T22:21:10.530 回答
0

您可以使用 boostrap 使您的编码更容易这里是您正在寻找的引导程序的功能之一

于 2018-01-20T20:34:31.920 回答