代码之家 › 专栏 › 技术社区 › Gil Epshtain

如何将css类添加到活动的页内链接(标签链接)-角度

routerlinkactive routerlink angular

Gil Epshtain · 技术社区 · 7 年前

我有一个角度,单页网站与下一个布局

<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\u Id是组件变量)

当我单击页眉的链接pageN时,窗口将滚动到pageN(使用页内导航, <a href="#someId"> )

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

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

2 回复 | 直到 7 年前

Asura 7 年前

创建一个变量,该变量在单击时设置为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;
}

user3121362 7 年前

您可以使用boostrap使编码更加简单 here 是您正在寻找的引导功能之一

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前